anjularjs 学习1

来源：互联网发布：快速傅里叶变换算法编辑：程序博客网时间：2024/05/23 01:22

当网页加载完毕，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>

<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>

0 0