AngularJs:是一个javascript框架/库-----可以通过<script>标签引入到HTML 页面中
eg:<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
AngularJs:是HTML的扩展,通过ng-directives(指令)扩展了HTML------可以通过表达式绑定数据到页面中(HTML).
AngularJs:可以开发单一页面应用程序.
我们建议把脚本放在 <body> 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。
各个angular.js版本下载:https://github.com/angular/angular.js/releases;
AngularJs 指令:AngularJs指令是以ng作为前缀的HTML属性。
ng-init:初始化AngularJs应用程序变量;
<div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro"> <span>名字:{{firstName}}</span> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
ng-app:定义了应用---告诉:ng-app所在的这个<div>元素就是AngularJs应用程序的“所有者”;
<div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro"> //AngularJS 模块定义应用: <script> //AngularJS 模块 var app = angular.module("angu",[]); </script>
ng-controller:定义控制器---控制AngularJs应用;
<div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro"> //AngularJS 控制器控制应用: <script> //AngularJS 模块 var app = angular.module("angu",[]); //AngularJS 控制器 app.controller("myCtro",function($scope){ }) </script>
ng-model:把输入域的值绑定到应用程序的变量name(name这里只是举例).
ng-bind:把应用程序的变量name绑定到某个段落的innerHTML.
<div ng-app = "angu" ng-init="firstName = 'hehe'" ng-controller="myCtro"> <span>名字:{{firstName}}</span> <input type="text" ng-model = "name"> <span ng-bind = "name"></span> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
AngularJs 表达式:AngularJs表达式写在双大括号内:{{expression}}
AngularJs表达式---把应用程序中的数据绑定到HTML,与ng-bind有异曲同工之妙.
但是,angularjs表达式会把数据输出到表达式书写的地方,而ng-bind指令则会把数据输出到所在标签的innerHTML中.
AngularJs 表达式--可以包含文字、变量、运算符--eg:{{firstName +" --"+ lastName}}----与javascript中的表达式类似.
<div ng-app = "angu" ng-controller="myCtro"> <input type="text" ng-model = "firstName"> <input type="text" ng-model = "lastName"> <span ng-bind = "name"></span> <p>表达式:{{firstName + "5" + lastName}}</p> </div> <script> var app = angular.module("angu",[]); app.controller("myCtro",function($scope){ }) </script>
AngularJs 应用:
AngularJs 模块(Module)---定义了AngularJs应用;
AngularJs 控制器 (Controller) ---用来控制AngularJs应用
而AngularJs 视图(view)中:ng-app指令定义了应用, ng-controller 定义了控制器。