angular.js学习笔记(一)

前言:之前也断断续续接触了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,

元素是 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>'
        }
    })

这里写图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章