AngularJS入门学习

初识：

{{}} 这种双层花括号的语法称之为：插值语法；也可以说是标识符；AngularJS 主要就是使用这种方法进行数据绑定

ng-module="name" 在ng的模型上插入一个name字段
是什么：

　　angular是仿模板引擎的语法

使用双向数据绑定（用户输入-->数据仓库、数据仓库-->用户界面；当用户输入发生改变时，都发生改变）的理念。

双向数据绑定：用户输入内容的任何更改会立即反应到模型变量（一个方向），模型变量的任何更改都会立即反映到页面显示中（一个方向）。

为什么：

使用框架的好处：

兼顾开发效率和性能效率。

数据绑定，减少访问 DOM 的操作，提高性能。

Angular克服HTML的不足。

依赖注入？在回调函数里面指定参数名，就能获得指定对象。（写$scope就能获得 $scope，写 $http 就能获得 $http ，哪怕参数的位置改变都不会出现什么问题，AngularJS 知道调用这个函数时自己应该传什么值。

能做什么:

最重要的使用就是：数据的双向绑定

怎么用？

简单实现：

1、引包

2、创建 AngularJS 的模块和控制器

　　　　//第一个参数 Angular 模块的模块名，第二个参数，这个模块所依赖的其他模块创建 Angular 的 "数据仓库"。

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

　　　　//第一个参数：控制器的名字，第二个参数：控制器的工厂

　　　　 app.controller('mainController',function($scope){...})

3、指定 AngularJs框架在哪个区域内执行，在相应标签添加 ng-app 字段

　　　　np-app 可以为空，为空表示全局　　　　

4、在页面显示标签中使用

　　　　使用的三种方式：

　　　　　　作为标签的属性：ng-module='属性' -->双向绑定，数据仓库-->ng-module-->数据仓库

　　　　　　作为标签的属性：ng-bind='属性' -->单向绑定，数据仓库-->ng-bind

　　　　　　作为标签内容： {{属性}}　 -->他其实跟ng-bind一样，单向绑定，数据仓库-->ng-bind

<!--ng-app为空时表示全局-->

<div ng-app='myApp' ng-controller='myController'>

    <b>1、没有ng-model也没有ng-bind</b><br/><br/>

    <span>{{name}}</span><br/><br/>

    <b>2、只有ng-modal</b><br/><br/>

    <input ng-model='name'><br/><br/>

    <b>3、input 等可以输入的表单，不能使用 ng-bind</b><br/><br/>

    <input ng-bind='name'><br/><br/>

    <b>4、只有ng-bind</b><br/><br/>

    <span ng-bind="name"></span><br/><br/>

    <b>5、$scope本身没有age属性</b><br/><br/>

    <input ng-model='age'><br/><br/>

    <b>6、ng-bind 绑定 age属性</b><br/><br/>

    <span style='background-color:yellow;' ng-bind="age"></span><br/><br/>

</div>

 <script src='http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js'></script>

 <script>

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

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

         //这个 $scope 对象就是创建出来的一个 AngularJS 数据仓库

         //这个数据仓库是随着一个 AngularJS 的控制器创建出来的

         //$scope是作用域的意思

         $scope.name='入世桃源人';

     });

 </script>

巴特西

AngularJS入门学习

初识：

是什么：

为什么：

能做什么:

怎么用？

简单实现：

最新文章

热门文章