AngularJSangularjs 笔记

1、  ng-app

ng-app指令告诉 AngularJS,什么因素是
AngularJS 应用程序 的”全部者”,比如:借使没有拉长那一个的话即移除了 ng-app 指令,HTML
将直接把表达式展现出来,不会去总括表明式的结果

<div ng-app="">

             <p>名字 : <input type="text" ng-model="username"></p>

             <h1>Hello {{username}}</h1>

      </div>

 

小心:二个页面上暗中认可只加载三个ng-app,七个暗中认可展现三个!假如想运行其余ng-app,需求经过js去控制

<div id="nameContent" ng-app="name" ng-controller="nameAll"                      ng-init="firstName='John';lastName='Doe'">

                <p>姓名: </p>

</div>

    <div id="addContent" ng-app="calculate" ng-controll="add" >

            <input type="text" ng-model="firstNum" id="firstNum" />

            <input type="text" ng-model="secondNum" id="secondNum" />

            <p>{{ firstNum}} + {{secondNum }} =

{{ $eval(firstNum) + $eval(secondNum) }}</p>

</div>

    <script type="text/javascript" src="js/angular-1.0.1.min.js" ></script>

    <script>

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

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

                $scope.firstName= "firstName";

                $scope.lastName= "lastName";   

            });



            var app1 = angular.module('calculate', []);

            app1.controller('add', function($scope) {

                $scope.firstNum= "firstNum";

                $scope.secondNum= "secondNum"; 

            });

angular.bootstrap(document.getElementById("addContent"), ['calculate']);

</script>

  

 

2、  ng-model

ng-model 指令把输入域的值绑定到应用程序变量 name上边,用来内定变量的名字

比如:

<input type=”text” ng-model=”username”>

3、  ng-bind

ng-bind 指令把应用程序变量 name 绑定到有个别段落的
innerHTML,用来体现ng-model变量的值

比如:

<h2 ng-bind=”username”></h2>

再有别的一种呈现的点子是:

<h1>Hello {{username}}</h1>

四 、  HTML5 允许扩充的(自制的)属性,以 data- 开头。AngularJS
属性以 ng- 开端,不过你可以使用 data-ng- 来让网页对 HTML5 有效

比如:

<h3 data-ng-bind=”username”></h3>

5、  angularjs表达式

是将表明式写在{{}}里面,把多少绑定到 HTML,表明式书写的任务”输出”数据

它们得以分包文字、运算符和变量

6、  ng-controller 

控制器

AngularJS 模块定义应用:var app = angular.module(‘【那里写ng-app的值】’,
[]);

AngularJS 控制器控制应用:

app.controller(【这里写ng-controller的值】, function($scope) {
    $scope. 【这里写ng-model的变量名】= “【那里写ng-model的值】”;
    $scope. 【那里写ng-model的变量名】= “【那里写ng-model的值】”;
});

譬如说:(注意:计算数字来说,要抬高$eval(里面放数字),不然会被看做是字符串)

<div ng-app="calculate" ng-controll="add" >

          <input type="text" ng-model="firstNum" id="firstNum" />

          <input type="text" ng-model="secondNum" id="secondNum" />

<p>{{ firstNum}} + {{secondNum }} = {{ $eval(firstNum) + $eval(secondNum) }}</p>

      </div>

      <script>

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

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

              $scope.firstNum= "firstNum";

              $scope.secondNum= "secondNum"; 

          });

   </script>

  

7、  ng-init

伊始化数据

比如:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
       <p>姓名: </p>
</div>

  

相关文章