Angularjs学习(一)

1.angularjs是什么？

　　首先他是个前端的框架。具体的可以baidu了 一大堆。

2.经典代码hello world.

<!doctype html>
<html ng-app>

<head>
    <title>iPlus Web App</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="angular.js"></script>
</head>
<body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!
</body>
</html>

上面的代码有两个指令如下：

ng-app:被他包含的元素都属于angularjs应用。

ng-model:绑定内部数据模型对象（$scope）中的属性用，也就是用来实现数据绑定的。也就是个映射的作用。在有这个指令的dom标签上的值改变会自动的映射到对应的变量上。

3.数据绑定之控制器指令ng-controller

html页面：

<!doctype html>
<html ng-app>

<head>
    <title>iPlus Web App</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="angular.js"></script>
</head>
<body>
        <div ng-controller="myController" >
            Hello {{yourname || 'World'}}!
        </div>
        
        <script type="text/javascript" src="myapp.js"></script>
</body>
</html>

myapp.js：

function myController($scope){
    $scope.yourname = "tianj";
}

页面显示：

代码很简单，但是有一个指令和 一个对象模型需要解释下。

ng-controller:如在dom的元素声明了ng-controller指令，那么这个dom元素下的所有元素都属于这个控制器。也就是你可以定义自己的一个方法去操作控制器下的内容。

$scope:这个是一个数据模型对象。说白了就是一个javascripe对象。这个对象的属性 和dom标签里的那个对应的属性其实是一个东西。

所以他们是联动的。也就是所谓的双向的数据绑定。

===========

以上就是自己学习过程中的浅薄理解。如有更好的理解请留言。。

 

 posted on 2015-03-17 15:18  木……木  阅读(104)  评论(0)    收藏  举报