AngularJS初学入门篇

1.AngularJS四大特征

1.1 MVC 模式

Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular为客户端的Web应用带来了传统服务端的服务,例如独立于视图的控制。 因此,后端减少了许多负担,产生了更轻的Web应用。

Model:数据,其实就是angular变量($scope.XX);

View: 数据的呈现,Html+Directive(指令);

Controller:操作数据,就是function,数据的增删改查;

1.2双向绑定

AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。

1.3依赖注入

依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建,只需要“吼一嗓子”,则此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象,都可以根据形参名称实现DI.

1.4模块化设计

高内聚低耦合法则,

    1)官方提供的模块           ng、ngRoute、ngAnimate、ngTouch

         2)用户自定义的模块        angular.module('模块名',[ ])

附上自己学习的网站:http://www.runoob.com/angularjs/angularjs-tutorial.html

写几个示列代码,加深自己的印象也希望可以帮助到初入AngularJS框架的学者一些帮助!

2:双向绑定

<html>
<head>
<title>双向绑定 Demo</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>

<body ng-app>

请输入你的名字:<input ng-model="myname">
{{myname}},你好!
</body>
</html>

2.0:初始化指令

<html>
<head>
    <title>初始化命令</title>
    <meta charset="utf-8" />
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<!--ng-app 指令告诉 AngularJS,<body> 元素是 AngularJS 应用程序 的"所有者"。-->
<!--ng-init="执行初始化的一个指令"-->
<body ng-app ng-init="myname='哈哈'">
    
叫大哥就告诉你<input ng-model="myname">
<br>
{{myname}},你好!<!--在这里输出属性值要用{{}}可以理解成输出语句-->

</body>
</html>

2.1:控制器

<html>
<head>
    <meta charset="UTF-8">
    <title>控制器</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        //创建根据name为指定的name创建一个模型
        var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
        
        /*$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,
        同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,
        基于作用域视图在修改数据时会立刻更新 
        $scope,同样的$scope 发生改变时也会立刻重新渲染视图.*/
        
        //定义控制器
        app.controller('myController',function($scope){
            $scope.add=function(){
                return parseInt($scope.x)+parseInt($scope.y);
            }
        });
        
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
        x:<input ng-model="x" >
        y:<input ng-model="y" >
        运算结果:{{add()}}
</body>
</html>

2.2:时间指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>事件指令</title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        
        <script>
            //先创建一个模型
            var app=angular.module('myApp',[]);
            
            app.controller('myController',function($scope){
                $scope.add=function(){
                    $scope.z=parseInt($scope.x)+parseInt($scope.y);
                }
            });
        </script>
        
    </head>

    <body ng-app="myApp" ng-controller="myController">
        
        x:<input ng-model="x">
        y:<input ng-model="y">
        <button ng-click="add()">运算</button>
        计算结果:{{z}}
    </body>
</html>

2.3:循环对象数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>循环对象数组</title>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script>
            var app=angular.module('myApp',[]);
            
            app.controller('myController',function($scope){
                
                $scope.list=[
                    {name:'张三',shuxue:'100',yuwen:'100'},
                    {name:'李帅',shuxue:'10',yuwen:'100'},
                    {name:'小黄',shuxue:'80',yuwen:'90'}
                
                ];//定义对象数组
                
            });
        </script>
        
    </head>
    <body ng-app="myApp" ng-controller="myController">
        <table>
            <tr>
                <td>姓名</td>
                <td>数学</td>
                <td>语文</td>
            </tr>
            <tr ng-repeat="entity in list">
                <td>{{entity.name}}</td>
                <td>{{entity.shuxue}}</td>
                <td>{{entity.yuwen}}</td>
            </tr>
        </table>
    </body>
</html>

2.4:循环数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>循环数组</title>
            <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
            <script>
                var app=angular.module('myApp',[]);//创建一个模型
                
                //定义控制器
                app.controller('myController',function($scope){
                    
                    $scope.list=[100,192,203,434];
                    
                });
                    
            </script>
            
    </head>
    <body ng-app="myApp" ng-controller="myController">
        <table>
            <!--这里的ng-repeat指令用于循环数组变量。-->
            <tr ng-repeat="x in list">
                <td>{{x}}</td>
            </tr>
        
        </table>
    </body>
</html>

有不理解的可以去上面附上的学习网站进行查找!

猜你喜欢

转载自blog.csdn.net/weixin_41244495/article/details/82887204