anjularjs只能使用一次ng-app吗_百度知道AngularJS 教程
AngularJS 简介
AngularJS 是一个 JavaScript 框架。它可通过 &script& 标签添加到 HTML 页面。
AngularJS 通过
扩展了 HTML，且通过
绑定数据到 HTML。
AngularJS 是一个 JavaScript 框架
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中：
src="http://cdn./libs/angular.js/1.4.6/angular.min.js"&&/script&
我们建议把脚本放在 &body& 元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。
各个 angular.js 版本下载：
AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
AngularJS 实例
&!DOCTYPE html&
&meta charset="utf-8"&
&script src="http://cdn./libs/angular.js/1.4.6/angular.min.js"&&/script&
&div ng-app=""&
& &p&名字 : &input type="text" ng-model="name"&&/p&
& &h1&Hello {{name}}&/h1&
实例讲解：
当网页加载完毕，AngularJS 自动开启。
ng-app 指令告诉 AngularJS，&div& 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
如果您移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。
什么是 AngularJS？
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。
AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。
AngularJS 实例
&div ng-app="" ng-init="firstName='John'"&
&p&姓名为 &span ng-bind="firstName"&&/span&&/p&
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
带有有效的 HTML5：
AngularJS 实例
&div data-ng-app="" data-ng-init="firstName='John'"&
&p&姓名为 &span data-ng-bind="firstName"&&/span&&/p&
AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript
表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 实例
&!DOCTYPE html&
&meta charset="utf-8"&
src="http://cdn./libs/angular.js/1.4.6/angular.min.js"&&/script&
&body&&div ng-app=""&
&p&我的第一个表达式： {{ 5 + 5 }}&/p&
AngularJS 应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用,
ng-controller
定义了控制器。
AngularJS 实例
&div ng-app=&myApp& ng-controller=&myCtrl&&
名: &input type=&text& ng-model=&firstName&&&br&
姓: &input type=&text& ng-model=&lastName&&&br&&br&
姓名: {{firstName + & & + lastName}}
&/div&&script&
var app = angular.module('myApp', []);app.controller('myCtrl',
function($scope) {&&& $scope.firstName= &John&;&&&
$scope.lastName= &Doe&;});&/script&
AngularJS 模块定义应用:
AngularJS 模块
var app = angular.module('myApp', []);
AngularJS 控制器控制应用:
AngularJS 控制器
app.controller('myCtrl',
function($scope) {&&& $scope.firstName= &John&;&&&
$scope.lastName= &Doe&;});
在接下来的教程中你将学习到更多的应用和模块的知识。Angular.js回顾ng-app和ng-model使用技巧
作者：fareise
字体：[ ] 类型：转载 时间：
这篇文章主要回顾Angular.js中ng-app和ng-model使用技巧，感兴趣的小伙伴们可以参考一下
Angular.js中index.html简单结构：
&!doctype html&
&html ng-app&
&script src="http://code.angularjs.org/angular-1.0.1.min.js"&&/script&
Your name: &input type="text" ng-model="yourname" placeholder="World"&
Hello {{yourname || 'World'}}!
ng-app属性是angular.js的标志语句，它标记了angular.js的作用域。ng-app可以添加在很多地方，像上面那样添加到html标签上，说明angular脚本对整个页面都起作用。也可以在局部添加ng-app属性，比如在某一个div内添加ng-app，则表明接下来的整个div区域使用angular脚本解析，而其他位置则不适用angular脚本解析。
ng-model表示建立一个数据模型。这里在input输入姓名的输入框内，我们把该定义了一个yourname数据模型。定义了该模型后，我们可以在下面进行调用，方法是利用{{}}。这样就完成了数据绑定，当我们在输入框内输入内容时，会同步到下面的Hello语句块中。
ng-model定义的数据模型不仅可以用于上述场景，还能在许多情况下得到广泛应用。
1、设置filter，实现搜索功能
在下面的代码中，我们利用一个简单的数据模型定义+filter就可以完成一个列表搜索功能。（这是中文网上的实例代码，先不需要管不清楚的部分）
&div class="container-fluid"&
&div class="row-fluid"&
&div class="span2"&
Search: &input ng-model="query"&
&div class="span10"&
&ul class="phones"&
&li ng-repeat="phone in phones | filter:query"&
{{phone.name}}
&p&{{phone.snippet}}&/p&
&上述代码中，为搜索框的input标签绑定了数据模型query。这样，用户输入的信息会被同步到query数据模型中。在下面的li中，使用filter:query就可以实现列表中的数据过滤功能，按照用户的输入信息进行filter过滤。
2、设置orderBy，实现列表排序功能
在下面的代码中，与filter同理，使用orderBy为列表添加一个排序功能：
Search: &input ng-model="query"&
&select ng-model="orderProp"&
&option value="name"&Alphabetical&/option&
&option value="age"&Newest&/option&
&ul class="phones"&
&li ng-repeat="phone in phones | filter:query | orderBy:orderProp"&
{{phone.name}}
&p&{{phone.snippet}}&/p&
以上就是关于ng-app和ng-model使用技巧，温故知新，希望大家从中可以有所收获。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具1022人阅读
javascript（66）
Angular.js中index.html简单结构：
&!doctype html&
&html ng-app&
&script src=&http://code.angularjs.org/angular-1.0.1.min.js&&&/script&
Your name: &input type=&text& ng-model=&yourname& placeholder=&World&&
Hello {{yourname || 'World'}}!
ng-app属性是angular.js的标志语句，它标记了angular.js的作用域。ng-app可以添加在很多地方，像上面那样添加到html标签上，说明angular脚本对整个页面都起作用。也可以在局部添加ng-app属性，比如在某一个div内添加ng-app，则表明接下来的整个div区域使用angular脚本解析，而其他位置则不适用angular脚本解析。
ng-model表示建立一个数据模型。这里在input输入姓名的输入框内，我们把该定义了一个yourname数据模型。定义了该模型后，我们可以在下面进行调用，方法是利用{{}}。这样就完成了数据绑定，当我们在输入框内输入内容时，会同步到下面的Hello语句块中。
ng-model定义的数据模型不仅可以用于上述场景，还能在许多情况下得到广泛应用。
1、设置filter，实现搜索功能
在下面的代码中，我们利用一个简单的数据模型定义+filter就可以完成一个列表搜索功能。（这是中文网上的实例代码，先不需要管不清楚的部分）
&div class=&container-fluid&&
&div class=&row-fluid&&
&div class=&span2&&
Search: &input ng-model=&query&&
&div class=&span10&&
&ul class=&phones&&
&li ng-repeat=&phone in phones | filter:query&&
{{phone.name}}
&p&{{phone.snippet}}&/p&
上述代码中，为搜索框的input标签绑定了数据模型query。这样，用户输入的信息会被同步到query数据模型中。在下面的li中，使用filter:query就可以实现列表中的数据过滤功能，按照用户的输入信息进行filter过滤。
2、设置orderBy，实现列表排序功能
在下面的代码中，与filter同理，使用orderBy为列表添加一个排序功能：
Search: &input ng-model=&query&&
&select ng-model=&orderProp&&
&option value=&name&&Alphabetical&/option&
&option value=&age&&Newest&/option&
&ul class=&phones&&
&li ng-repeat=&phone in phones | filter:query | orderBy:orderProp&&
{{phone.name}}
&p&{{phone.snippet}}&/p&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：156562次
积分：2682
积分：2682
排名：第9851名
原创：94篇
评论：45条
阅读：6573
文章：14篇
阅读：19268
文章：11篇
阅读：11399
阅读：3648
阅读：3648
文章：17篇
阅读：24575
文章：42篇
阅读：98163
(5)(9)(2)(1)(7)(6)(16)(21)(6)(4)(3)(4)(11)(8)1310人阅读
JavaScript（22）
有时，标签中只要写ng-app，而有时却要用ng-app=”MyApp”之类的带具体值的写法，那两者区别在哪呢？
如果在js文件中的写法是直接用函数定义controller，例如：
var mycontroller = function($scope){
$scope.msg = 'hello';
那么在html中只需要用ng-app声明即可；
如果在js文件中是用module的方式来声明controller，例如：
var app = angular.module('MyApp', []);
app.controller('mycontroller ',function($scope){
$scope.msg = 'hello';
那么在html中就要声明ng-app=”MyApp”，否则是无法使用mycontroller的。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：622639次
积分：7301
积分：7301
排名：第2051名
原创：187篇
转载：12篇
评论：196条
(1)(5)(2)(5)(12)(7)(6)(4)(7)(2)(5)(2)(2)(14)(10)(6)(15)(9)(13)(10)(10)(12)(5)(13)(5)(2)(1)(2)(4)(3)(1)(1)(2)(3)