anjularjs 学习1

最新推荐文章于 2018-09-19 11:29:28 发布

琅琊山二当家

最新推荐文章于 2018-09-19 11:29:28 发布

阅读量416

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/AlbertFly/article/details/60596383

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

 
   当网页加载完毕，AngularJS 自动开启。 
  

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

ng-model

输入文本的内容绑定到其他出现这个值比如price的地方.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=5">
<h2>价格计算器</h2>
数量: <input type="number" ng-bind="quantity">
价格: <input type="number" ng-bind="price">
<p><b>总价:</b> {{quantity * price}}</p>
</div>
</body>
</html>

2

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

3
ng-int 和controller同时出现 ng-init值优先

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl" ng-init="name=1">
	<input ng-model="name">
	<h1>{{greeting}}</h1>
	<button ng-click='sayHello()'>点我</button>	
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
	$scope.sayHello = function() {
    	$scope.greeting = 'Hello ' + $scope.name + '!';
	};
});
</script>

<p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>

</body>
</html>

name 值首先刷出来是1 不是runoob

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

AngularJS 实例

创建控制器时，将 $rootScope 作为参数传递，可在应用中使用：

 
   < 
   div  
   ng-app= 
   "myApp"  
   ng-controller= 
   "myCtrl" 
   > 
   
   < 
   h1 
   >{{lastname}} 家族成员: 
   < 
   /h1 
   > 
   
   < 
   ul 
   > 
   
   < 
   li  
   ng-repeat= 
   "x in names" 
   > 
   {{x}}  
   {{lastname}} 
   < 
   /li 
   > 
   
   < 
   /ul 
   > 
   
   < 
   /div 
   > 
   
   < 
   script 
   > 
   
   var app = angular.module( 
   'myApp', []); 
   
 app.controller( 
   'myCtrl',  
   function($scope, $rootScope) { 
   
     $scope.names = [ 
   "Emil",  
   "Tobias",  
   "Linus"]; 
   
     $rootScope.lastname =  
   "Refsnes"; 
   
 }); 
   
   < 
   /script 
   >