angularjs笔记(一)

　　angularjs是javascript框架，通过指令（指令就是自定义的html标签属性）扩展了HTML，并且可以通过表达式（表达式使用）绑定数据到HTML。

1、angularjs指令　　指令就是扩展的HTML属性，带有前缀ng-。

　　ng-app指令初始化一个AngularJS应用程序，也就是指定AngularJS作用范围，如<html ng-app="">作用于整个页面，<div ng-app="">作用于当前Div块内；

　　ng-model指令把元素值绑定到应用程序；注意是绑定到应用程序，相当于与当前应用程序全局变量绑定

　　ng-init指令初始化应用程序数据，使用中不常见

　　ng-repeat指令根据作用的数组重复使用该指令的HTML元素

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="" ng-init="names=['Tom','Lily','John']">

<ul>

    <li ng-repeat="x in names">{{x}}</li>

</ul>

</div>

</body>

</html>

ng-repeat

　　创建自定义指令：使用directive函数创建自定义指令，指令名以小写字母开始，(1)、如果函数中指令名参数有大写字母，那么使用中用“-”短横分割，使用中的指令名不区分大小写；(2)、如果函数中指令名参数全部小写，那么使用中不做任何改变。

　　例子：　　

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        template : "<h1>自定义指令!</h1>"

    };

});

</script>

</body>

</body>

</html>

自定义指令

　　可以通过以下方式调用：默认使用元素名或属性方式

　　（1）、元素名　　<runoob-directive></runoob-directive>

　　（2）、属性　　<div runoob-directive></div>

　　（3）、类名　　<div class="runoob-directive"></div>　　

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        restrict : "C",

        template : "<h1>自定义指令!</h1>"

    };

});

限制类名方式调用

（4）、注释

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        restrict : "M",

        replace : true,

        template : "<h1>自定义指令!</h1>"

    };

});

限制注释方式调用

　　限制自定义指令调用方式：

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        restrict : "A",

        template : "<h1>自定义指令!</h1>"

    };

});

限制自定义指令调用方式

　　restrict 值可以是以下几种:　　E 只限元素名使用、A只限属性使用、C只限类名使用、M只限注释使用。restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

2、表达式 AngularJS表达式写在双大括号内：{{expression}}，可以包含文字、运算符和变量；表达式类似ng-bind指令，属性内部可以写文字、运算式和变量　

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app>

    <input type="text" ng-model="params1">

    <p>{{ (params1-0) + 5+'%' }}</p>

</div>

</body>

</html>

表达式

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="" ng-init="m=1;v=5">

<span ng-bind="'密度q：'+(m/v)*100+'%'"></span>

</div>

</body>

</html>

ng-bind指令

　　AngularJS对象　　　　

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 {{ person.lastName }}</p>

表达式

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>姓为 <span ng-bind="person.lastName"></span></p>

ng-bind指令

　　AngularJS数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 {{ points[2] }}</p>

表达式

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>第三个值为 <span ng-bind="points[2]"></span></p>

ng-bind指令

3、AngularJS MVC

　　（1）、ng-model指令绑定应用程序数据到HTML控制器（input、select、textarea）的值　　

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

名字: <input ng-model="name">

<h1>你输入了: {{name}}</h1>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.name = "John Doe";

});

</script>

<p>修改输入框的值，标题的名字也会相应修改。</p>

</body>

</html>

ng-model双向绑定

　　（2）、View指HTML，AngularJS通过$scope作用域连接视图和控制器

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

    $scope.carname = "Volvo";

});

</script>

<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>

</body>

</html>

作用域连接视图和控制器

　　（3）、ng-controller指令定义了应用程序控制器，AngularJS控制器就是常规的Javascript对象，由标准javascript对象函数创建　　

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br>

<br>

姓名: {{fullName()}}

</div>

<script>

var app = angular.module('myApp', []);

app.controller('personCtrl', function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";

    $scope.fullName = function() {

        return $scope.firstName + " " + $scope.lastName;

    }

});

</script>

</body>

</html>

控制器中变量和方法

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="namesCtrl"> 

<ul>

  <li ng-repeat="x in names">

    {{ x.name + ', ' + x.country }}

  </li>

</ul>

</div>

<script src="namesController.js"></script>

</body>

</html>

引用外部控制器

angular.module('myApp', []).controller('namesCtrl', function($scope) {

    $scope.names = [

        {name:'Jani',country:'Norway'},

        {name:'Hege',country:'Sweden'},

        {name:'Kai',country:'Denmark'}

    ];

});

外部控制器

使用中，一个控制器对应一个作用域，所以要分别写对应的控制器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script type="text/javascript" src="/javascript/angularjs/personNames.js"></script>

</head>

<body>

<div ng-app="myapp1">

    <div ng-controller="mycontroller1">

        <p>{{name}}</p>

    </div>

    <div ng-controller="mycontroller2">

        <p>{{name}}</p>

    </div>

</div>

</body>

</html>

一个应用程序，两个控制器

var app=angular.module('myapp1', []);

app.controller('mycontroller1', function ($scope) {

    $scope.name ='HanMeimei';

});

app.controller('mycontroller2',function($scope){

    $scope.name='LiMing';

});

两个控制器同时在一个Javascript文件

angularjs笔记(一)的更多相关文章

AngularJS笔记---注册服务
在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, Angul ...
AngularJs 笔记
初识 directive 指令 ng-app 初始化一个AngularJs应用程序(通过一个值(比如 ng-app="myModule")连接到代码模块.) ng-init 初始化 ...
AngularJS笔记--自定义指令
在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义. 下面定 ...
AngularJS笔记---路由视图
最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...
AngularJS笔记---作用域和控制器
什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设 ...
angularjs 笔记(1) -- 引导
首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"> ...
AngularJS笔记---数据绑定
一.数据绑定 1.简单绑定下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...
angularjs笔记(三)
AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head&g ...
angularjs笔记(二)
AngularJS API 4.AngularJS过滤器使用一个管道符(|)添加到表达式和指令中例1.格式化字母转为大写 <!DOCTYPE html> <html> &l ...

随机推荐

1025基础REDIS
-- 登录AUTHPING -- 通用命令EXISTS KEY EXPIRE KEY seconds 为给定 KEY 设置过期时间 -- 字符SET runoobkey redisDEL runoob ...
任意文件夹下打开cmd功能的设置（win10）
win10中打开cmd的方法: 1."运行"中输入CMD打开,也可以按住win+R 2.选择命令行工具中"开始-->>所有应用-->>Window ...
Jenkins+svn+maven
首先我们在我们的服务器上安装好svn和maven 这里在前两步骤基本上没有啥问题,主要就是在Jenkins的步骤我弄了好长时间,这里记录一下 Jenkins的问题我是在这个网址解决的:http://b ...
【BZOJ 1758】【WC 2010】重建计划分数规划+点分治+单调队列
一开始看到$\frac{\sum_{}}{\sum_{}}$就想到了01分数规划但最终还是看了题解二分完后的点分治,只需要维护一个由之前处理过的子树得出的$tb数组$,然后根据遍历每个当前的子树上的 ...
【BZOJ 2440】【中山市选 2011】完全平方数莫比乌斯函数+容斥原理
网上PoPoQQQ的课件: •题目大意:求第k个无平方因子数 •无平方因子数(Square-Free Number),即分解之后所有质因数的次数都为1的数 •首先二分答案问题转化为求[1,x]之间有 ...
nginx实战2---浏览器设置缓存
对常见格式的图片文件等在浏览器本地缓存,对于css,js等文件在浏览器本地缓存. 语法:expires [time|epoch|max|off 默认值:off expires指令控制HTTP应答中的& ...
python安装失败0x80240017
安装KB2999226更新补丁后, 可以正常安装python3.5. 此更新包在vs2015的patch包里有.Microsoft下载中心也有,这里列出的适用于win7x86: Windows 7 更 ...
PL/SQL连接Oracle客户端步骤
首先,安装oracle,再安装plsql 打开plsql——>选择“首选项(preferences)”——>输入oracle客户端路径如下图:
【bzoj4241】历史研究
http://www.lydsy.com/JudgeOnline/problem.php?id=4241 (题目链接) 看到题目就联想到了[bzoj2809] Apio2012—dispatching ...
.net社区
英文社区: 名称:MSDN 地址:http://msdn.microsoft.com/zh-cn/default.aspx 描述:这个网站是大家学.Net的初始网站,也是.net方面官方和权威的资料, ...

angularjs笔记(一)

angularjs笔记(一)的更多相关文章

随机推荐

热门专题