AngularJS入门之如何快速上手（详细讲解什么是angular）

最新推荐文章于 2023-12-04 11:43:38 发布

赵海辛

最新推荐文章于 2023-12-04 11:43:38 发布

阅读量3.9k

点赞数 4

分类专栏： AngularJS 文章标签： angular 轮播购物车进度条 bootstrap

本文链接：https://blog.csdn.net/zhaohaixin0418/article/details/53009047

版权

AngularJS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

简介：

AngularJS （ng）诞生于2009年
由Misko Hevery 等人创建
后为Google所收购

（PS：下载angular项目所用到的所有js路径：http://download.csdn.net/download/zhaohaixin0418/9672039）

概述：

AngularJS（ng）是一个纯JS框架，AngularJS易于构建CRUD应用(CRUD意思是增删改查)

适用于以数据操作为主的SPA（Single Page Application）应用。
基于jQuery对传统的DOM操作进行进一步的封装---使用MVC操作代替了所有的DOM操作。
不再是“先查找元素再操作元素”，
所有的操作都是以“业务数据“为中心

搭建环境：

使用 AngularJS 的步骤：
1.引入必需的js文件 : angular.js
2.为父元素声明ngApp属性(这里的父元素一般指html)(系统会自动载入或启动一个NG应用，这个ngApp是唯一的，只能有一个)
3.为父元素内部使用angularJS相关内容
4.




    
  
  
    ng    
    
  
  
    <script src="public/js/jquery-2.2.3.min.js"></script>
    <script src="public/js/bootstrap.js"></script>
    <script src="public/js/angular.js"></script>
     rel="stylesheet" href="public/css/bootstrap.css">
     rel="stylesheet" href="public/css/animation.css">

ng四大特性：

1.采用MVC模式，页面中再也无需出现DOM操作。
2.双向数据绑定。
3.依赖注入
4.模块化设计

ng四大特性之一MVC模式：

(1)Model: 模型，指业务数据，web项目中由js变量担当model。
(2)View: 视图，用户界面，HTML
(3)Controller: 控制器，Function

ng指令：

AngularJS 中ng模块提供的指令(directive)
(1) ngApp：自动载入/启动一个AngularJS应用
(2) ngInit：用于声明Model（模型）变量
(3) ngController：创建一个控制器对象的实例
(4) ngBind：在当前元素的innerHTML上输入指定的表达式的值
(5) ngRepeat：为HTML增加循环功能，循环输出当前元素
(6) ngIf：为HTML增加选择功能，只有在表达式值为true时，当前元素才添加到DOM树
(7) ngSrc：解决img等标签的src属性中包含{{}}产生的问题
语法： <img ng-src="路径/{{表达式}}"/>
(8) ngClick: 为元素绑定监听函数(不是全局函数，而是Model函数)
语法： <ANY ng-click="模型函数()">
(9) 使用$scope.模型函数名 = function(){}格式来声明模型函数
(10) ngStyle: 赋值为一个Model对象，用于为当前元素指定样式
(11) ngShow/ngHide: 通过display：none/block来控制当前元素是否显示
(12) ngDisabled: 赋值为true/false，可以控制当前元素是否禁用
(13) ngChecked: 赋值为true/false，可以控制当前元素是否选中

Angular中声明变量——Model数据
有两种方式可以声明Model变量：
(1)使用ngInit指令声明
ngInit 指令可以声明为HTML元素的属性或样式
ngInit 指令声明的Model变量可以先使用再声明
ngInit 指令可以一次声明多个Model变量，用分号隔开即可
ngInit 指令可以声明哪些类型的Model变量：
number、string、boolean、对象、数组、对象的数组
注意：使用ngInit定义Model变量时不能使用new关键字；此方法
把View和Model混杂在一起，不推荐使用！

(2)使用Controller创建Model变量——推荐使用
创建Module <= 创建Controller <= 创建Model变量
注意：新版本的Angular要求控制器必须声明在一个模块中！

具体步骤：
1)声明一个自定义的模块(module)
angular.module('模块名', [ ])
2)在当前AngularJS应用中注册自定义模块
ng-app="模块名"
3)在自定义模块中创建Controller函数，其中创建Model数据
$scope.模型变量名 = 值
4)在View中创建Controller对象的实例，指定其作用范围
<标签 ng-controller=“控制器名”>...控制器的有效范围...</标签>
5)在控制器的作用范围内输出Model变量
可以使用{{}}输出Model变量的值开发人员来编写

$scope $rootScope
(1)每个控制器的实例都对应一个作用范围对象，即$scope
(2)在控制器中声明的Model数据，必须保存在一个作用范围内
(3)一个HTML中可以声明多个控制器实例，每个控制器都有自己的作用范围，这些范围内的数据彼此隔离不会互相影响，可以由不同开发人员来编写
(4)为了在多个控制器间共享数据，可以将Model数据保存在一个“全局作用范围内”——$rootScope——整个AngularApp中有且只有一个$rootScope对象，且此对象是所有的$scope的父作用域对象
(5)作用域对象间可以实现继承，只需要将某个控制器实例声明在另一个控制器实例的有效作用域内部即可。
模块：
基本语法：

<script>
    angular.module("haixin",[]).controller("方法名",function($scope){
        $scope.mobile1="";
        $scope.mobile2="";
    })
</script>

控制器：
定义对象属性：

<script>
    function studentController($scope){
        $scope.student={
            stu1:"zhangsan",
            stu2:"lisi"
        }
    }
</script>

控制器：
定义方法：

<script>
    function studentController($scope){
        $scope.student={
            sName1:"zhangsan",
            sName2:"lisi",
            allName:function(){
                var  n;
                n=$scope.student;
                return n.sName1+""+n.sName2;
            }
        }
    }
</script>

PS：小练习：
(1)创建一个新的页面，其中声明module、controller、model变量：一个学生对象，其中包含sname、gender、birthday、score等属性，在view中显示这些model数据
(2)创建一个新的页面，其中声明module、controller、model变量：5个分数组成的数组，在view中的一个列表中输出这5个数字
(3)五个商品的数据显示在View中的table元素中，使用ngRepeat指令进行循环
案例答案：



    
   
   
        
    
    {{obj}}
        
    
    {{k}}
{{k}}:{{v}}
    
   
   
    
   
   
        
    
    序号 商品名字 商品价格 商品图片
{{$index+1}} {{i.name}} {{i.price}} 
        
    
    
    
   
   
    <script>
    angular.module("haixin",[]).controller("practice",function($scope){
        $scope.obj = new Object();
        $scope.obj.name = "Tom";
        $scope.obj.gender ="boy";
        $scope.obj.birthday = "4.18";
        $scope.arr=[10,20,30];
    }).controller("commodity",function ($scope) {
        $scope.arr1=[
            {name:"商品1",price:"77",img:"images/1.jpg"},
            {name:"商品2",price:"33",img:"images/2.jpg"},
            {name:"商品3",price:"55",img:"images/3.jpg"}
        ];
        $scope.add=function () {
            for(var i=0;i<3;i++){
                var arr2 ={};
                arr2.name="商品";
                arr2.price="11";
                arr2.img="images/"+(1+i)+".jpg";
                $scope.arr1.push(arr2);
            }
        }
    })
    </script>

序号	商品名字	商品价格	商品图片
{{$index+1}}	{{i.name}}	{{i.price}}

ng四大特性--双向数据绑定：

方向一：把Model数据绑定到View上
把Model数据绑定到View上后，任何Model数据的修改，都会自动更新到View上（{{ }}、ngBind、ngRepeat、ngSrc...都实现了方向1的绑定）

方向二：把View绑定到Model上
把View数据绑定到Model后，任何View数据的修改，都会自动更新到Model上
此后不论任何时候，只要View中的数据一修改，Model中的数据会自动随之修改。实现方法：只有ngModel指令。

可以使用$scope.$watch(‘模型变量名’, fn)监视一个模型变量值的改变；单行文本输入域、多行文本输入域、下拉框、单选按钮控件默认会把自己的value属性值绑定到一个Model变量；复选框会把一个true/false值绑定到一个Model变量。

ng模块中提供的服务(service)
(1)$rootScope: 用于在不同的控制器间共享数据
(2)$interval: 提供周期性定时器服务
(3)$interval.cancel(t)：清除定时器
(4)$timeout: 提供一次性定时器服务
(5)$http: 发起异步的Ajax请求服务
定时器小案例：input值改变的时候，控制台也会改变，若只写input和P的时候，input值改变的时候P的内容也跟着改变。
代码如下：


{{name}}
<script>
    $scope.$watch("Uname",function () {
        console.log($scope.Uname);
    })
</script>

PS：小练习
1：简易版的点击次数计算器
2：简易版的轮播广告
3：用Bootstrap组件制作一个进度条（每隔0.2s，前进10%）取消定时：$interval.cancel(t);
4：简易版的购物车
5：同意使用条款，则可以注册，否则禁止注册
6：简易版模拟QQ选择切换头像
7：全选或取消全选（PS：4,5,6,7这四个小练习是双向数据绑定了，直接加ng指令就可实现。下面案例中图片名字一律为n.jpg【n 为正整数】）
案例代码如下：




  
  
    
   
   
        
    
    {{n}}
        
    
    
    
    

        
        
    
    
        
    
    
        
    
    
    
   
   
    
   
   
            
    
    
    
   
   
    
   
   
        
    
    
     
     
            单价：
     
     
            数量：
     
     
            小计：
     
     {{price*num}}
        
    
    
        
        
    
    我同意本站的使用条款
        
    
    
        
    
    
        
    
    
        
        
    
    
        
    
    
        
        
    
    
            
     
     A
            
     
     B
            
     
     C
            
     
     
            
     
     全选
            
     
     取消全选
        
    
    
    
   
   

  
  
<script>
    angular.module("haixin",[]).controller("lunbo",function ($scope) {
        $scope.n = 10;
        $scope.fn=function () {
            $scope.n++;
        };
        $scope.img =1;
        $scope.next=function () {
            $scope.img++;
            if($scope.img==5){
                $scope.img=1;
            }
        };
        $scope.prev=function () {
          $scope.img--;
            if($scope.img<1){
                $scope.img=4;
            }
        }
    }).controller("jindutiao",function ($scope,$interval) {
        $scope.n=10;
        $scope.myStyle={"width":"0%"};
        var t = $interval(function () {
            $scope.myStyle.width=$scope.n+"%";
            $scope.n+=10;
            if($scope.n==90){
                $interval.cancel(t);
            }
        },200)
    })
</script>

《未完待续……明日更新……》

赵海辛

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
AngularJS入门之如何快速上手（详细讲解什么是angular）

接触angular久了越来越发现他就是个霸气的男友，功能如此强大，相比react，ng就好像是个高大威猛的男人，react好像就是个娇小的妹子= =。。。当然，或许是我react太烂了把……进入正题，详细讲解下什么是angular（初学的小白，可以一步一步跟着我的内容来学，相信你会很快能上手，这里只是一个入门）。
复制链接

扫一扫