前言:之前也断断续续接触了angular的相关内容,也没有加以实施运用。AngularJS 使得开发现单一页面应用程序变得更加容易。今天刚好做完了一个angular小demo,借此把之前的学习笔记整合了一下。
指令
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
<body ng-app="lacy">
<div class="demo1">
<input type="text" ng-model="name"/>
<p>你输入的是 <span>{{name}}</span></p>
</div>
</body>
此时控制台报错。为什么?
由于ng-app在html里面我用;lacy命名,但在脚本里面并没有定义所以出了错。把代码中的ng-app=”lacy”改为ng-app=”“就不再报错。
当网页加载完毕,AngularJS 自动开启。
ng-app 指令告诉 AngularJS,
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
ng-init 指令初始化 AngularJS 应用程序变量。
<body ng-app="" ng-init="user='lacy'">
<div class="demo1">
<input type="text" ng-model="name"/>
<p>你输入的是 <span>{{name}}</span></p>
<p ng-bind="user"></p>
</div>
</body>
ps: HTML5 允许扩展的属性,以 data- 开头。AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5 有效。
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
AngularJS 表达式写在双大括号内:{{ expression }}
等价于ng-bind
<p>{{1+1}}</p>
<p>{{name+user}}</p>
<p ng-bind="name+user"></p>
AngularJS 模块(Module) 定义了 AngularJS 应用。
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
<body ng-app="myApp" ng-init="user='lacy'" ng-controller="myCtrl">
<div class="demo1">
<input type="text" ng-model="name"/>
<p>你输入的是 <span>{{name}}</span></p>
<p ng-bind="user"></p>
<p>{{1+1}}</p>
</div>
</body>
<script src="Common/js/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.name = 'google';
})
</script>
ng-repeat 指令会重复一个 HTML 元素
<li ng-repeat="x in names">{{x}}</li>
$scope.names = ['a','b','c']
自定义指令
.directive 函数来添加自定义的指令
要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive
你可以通过元素名、属性、类名、注释(E,A,C,M)方式来调用指令:
<div my-zhi-lin></div>
<div class="my-zhi-lin"></div>
<my-zhi-lin></my-zhi-lin>
app.directive('myZhiLin',function(){
return{
//restrict : 'E',
template : '<h1>这是我自定义的指令哈哈哈哈</h1>'
}
})