AngularJs学习笔记

总结一下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div ng-app="">
 <p>  <input type="text" ng-model="hello"/></p>
    {{hello}}
    <div ng-bind="hello"></div>
</div>
</body>
<script src="../js/angular-1.3.0.js"></script>
</html>

上面代码的说明：

1. ng-app 指定管理DOM中哪个部分

2 ng-model 绑定HTML元素到应用程序(把它理解为需要把输入绑定到元素)

3 ng-bind ={{}} 即把输入绑定到输出上 ，这个元素就是输出

 

顺便复习下MVC  M—>model 把它理解为数据层，就是核心数据什么的，SQL什么的

                              C--->controller 把它理解为处理数据的层面，即一个黑盒，一般view层数据经过C层改变到M层，或者数据流相反

                              V--->view 层 这个好理解，天天打交道的页面；

然后细细讲下Controller

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

这里有一个$scope 变量  这是个什么鬼？

他是连接view 和 controller的桥梁

<body>
<div ng-app="">
    <div ng-controller="Controller">
        <input type="text" ng-model="person.firstName"/>
        <input type="text" ng-model="person.secondName"/>
        {{person.firstName+":"+person.secondName}}
    </div>
</div>
<script src="../js/angular-1.3.0.js"></script>
<script>
    function Controller($scope){
        $scope.person={
            firstName:"l",
            secondName:"jsd"
        }
    }
</script>

ng-repeat

div ng-app="" ng-controller="namesController">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
<script>
function namesController($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
}
</script>
数量： <input type="number" ng-model="quantity">
        价格： <input type="number" ng-model="price">
        <p>总价 = {{ (quantity * price) | currency }}</p>

posted on 2015-11-08 21:39  liuestc  阅读(133)  评论(0)  编辑  收藏  举报