AngularJS入门demo

时间 2019-11-16

标签 angularjs 入门 demo 栏目 AngularJS 繁體版

原文原文链接

一.AngularJS简介

　　AngularJS诞生于2009年,由Misko Hevery 等人建立,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中html

二.四大特性

　1.mvc设计模式

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

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

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

　2.双向绑定

　　左边的视图就是咱们能看到的页面，右边数据模型也就是变量，咱们经过控制器改变变量值，视图也会跟着变化。一样，视图里面，好比有个文本框，修改文本框，对应的变量值也会修改。web

　3.依赖注入

　　指某个对象依赖的其余对象无需手工建立，此对象在建立时，其依赖的对象由框架来自动建立并注入进来。json

　4.模块化设计

　　高内聚低耦合法则设计模式

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

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

三.入门案例

　　下载angular.min.js库文件：https://github.com/angular/angular.js/releasesapp

　　和下面的html放在同一目录

<html>
<head>
    <title>入门案例</title>
    <script src="angular.min.js"></script>
</head>
<body ng-app>
{{1+2}}
</body>
</html>

<html>
<head>
    <title>双向绑定</title>
    <script src="angular.min.js"></script>
</head>
<body ng-app>
请输入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>

<html>
<head>
    <title>初始化</title>
    <script src="angular.min.js"></script>
</head>
<body ng-app   ng-init="myname='st2'">
请输入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>

<html>
<head>
    <title>初始化</title>
    <script src="angular.min.js"></script>
    <script>
        var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
        //定义控制器
        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>

<html>
<head>
    <title>事件指令</title>
    <script src="angular.min.js"></script>    
    <script>
        var app=angular.module('myApp',[]); //定义了一个叫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>

<html>
<head>
    <title>入门小Demo-6  循环数据</title>
    <script src="angular.min.js"></script>
    <script>
        var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
        //定义控制器
        app.controller('myController',function($scope){
            $scope.list= [12,122,123,321 ];//定义数组
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="x in list">
    <td>{{x}}</td>
</tr>
</table>
</body>
</html>

<html>
<head>
    <title>循环对象数组</title>
    <script src="angular.min.js"></script>    
    <script>
        var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
        //定义控制器
        app.controller('myController',function($scope){        
            $scope.list= [
                {name:'张三',shuxue:100,yuwen:99},
                {name:'李四',shuxue:99,yuwen:100},
                {name:'王五',shuxue:100,yuwen:99}
            ];//定义数组            
        });    
    </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>

下面这个案例须要在跑在web工程中

<html>
<head>
    <title>内置服务</title>
    <meta charset="utf-8" />
    <script src="angular.min.js"></script>    
    <script>
        var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
        //定义控制器
        app.controller('myController',function($scope,$http){        
            $scope.findAll=function(){
                $http.get('data.json').success(
                    function(response){
                        $scope.list=response;
                    }                    
                );                
            }            
        });    
    </script>    
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
<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>

1. AngularJS - 入门小Demo
2. AngularJS引入Echarts的Demo
3. AngularJs入门
4. AngularJS入门
5. angularjs入门
6. AngularJS入门（三）
7. AngularJS入门（一）
8. AngularJS入门（五）
9. (angularjs) 入门
10. AngularJS入门(一)
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用