angularjs学习笔记--

Posted 2020-10-03 艳阳天

<span ng-bind="name"></span>
<span ng:bind="name"></span>
<span ng_bind="name"></span>
<span data-ng-bind="name"></span>
<span x-ng-bind="name"></span>

 

Ps：上述绑定方法等价

 

ng-app=”模块名”  定义angularjs的使用范围；

ng-init=”变量=值”，初始化变量的值，当有多个变量时，中间用分号隔开；

ng-model=”变量”  定义变量名；

ng-bind=”变量”  绑定变量名，获取该变量的数据。这里的变量即是前一条的变量名。但一般用双重花括号来获取变量的值。

 

 

<div ng-app=""> 
    <p>名字：<input type="text" ng-model="name" /></p> 
    <h1>hello{{name}}</h1> 
</div>

ng-app指令告诉angularjs，<div>元素是angularjs应用程序的所有者；ng-model指令把输入域的值绑定到应用程序变量name；ng-bind指令把应用程序变量name绑定到某个段落的innerhtml。

 

Angularjs对于开发单一页面应用程序变得更易：angularjs把应用程序数据绑定到HTML元素；可以克隆和充分HTML代码；可以隐藏和显示HTML元素；可以在HTML元素背后添加代码；支持输入验证。

 

<div ng-app="" ng-init="firstName=‘jonh‘"> 
<p>姓名为：<span ng-bind="firstName"></span></p>     
</div>

 

H5允许扩展的属性，以data-开头，angularjs属性以ng-开头，但可以使用data-ng-让网页对h5有效。

<div ng-app="" data-ng-init="firstName=‘jonh‘"> 
<p>姓名为：<span data-ng-bind="firstName"></span></p>     
</div>

 

Angularjs表达式：

Angularjs表达式写在双大括号内；angularjs表达式把数据绑定到HTML，类似于ng-bind指令；angularjs将在表达式书写的位置输出数据。

 

 

Angularjs模块定义了angularjs的应用；angularjs控制器用于控制angularjs应用；ng-app指令了应用，与ng-controller定义了控制器。

 

 

未完待续。。。。。。

 

参考 & 感谢：http://www.runoob.com/angularjs/angularjs-intro.html