devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Angular JS 入门_angular js入门

作者：小小林熬夜学编程 | 2024-06-10 00:01:54

赞

踩

angular js入门

Angular JS 入门

 

 

1.1 Angular JS 简介 

        Angular JS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。

 

1.2 Angular JS 四大特征

（1）MVC 模式：

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

 

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

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

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


 

 

（2）双向绑定

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

 

（3）依赖注入

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

 

（4）模块化设计

高内聚低耦合法则

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

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

 

 

1.3 入门案例

 

（1）表达式

 

  1. <!doctype html>

  2. <html>

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>angular js 表达式</title>

  6. <!-- 引入angular的js文件 -->

  7. <script src="angular.min.js"></script>

  8.  

  9. </head>

  10. <!-- 注意：必须添加ng-app指令 -->

  11. <body ng-app>

  12. <!-- angular js 的表达式格式由两个大括号构成：{{}} -->

  13. {{'Hello' + ' Angular JS!'}}

  14. </body>

  15. </html>

（2）双向绑定

 

  1. <!doctype html>

  2. <!doctype html>

  3. <html>

  4. <head>

  5. <meta charset="UTF-8">

  6. <title>angular js 双向绑定</title>

  7. <script src="angular.min.js"></script>

  8.  

  9. </head>

  10. <body ng-app>

  11. <!-- 使用 ng-model 绑定变量 -->

  12. 输入：<input type="text" ng-model="input">

  13. <!-- 使用变量 -->

  14. {{input}}

  15. </body>

  16. </html>

（3）初始化指令

 

  1. <!doctype html>

  2. <!doctype html>

  3. <html>

  4. <head>

  5. <meta charset="UTF-8">

  6. <title>angular js 初始化指令</title>

  7. <script src="angular.min.js"></script>

  8.  

  9. </head>

  10. <!-- 使用 ng-init 指令设置变量的默认值 -->

  11. <body ng-app ng-init="input='Angular JS'">

  12. <!-- 使用 ng-model 绑定变量 -->

  13. 输入：<input ng-model="input">

  14. <!-- 使用变量 -->

  15. {{input}}

  16. </body>

  17. </html>

（4）控制器

 

  1. <!doctype html>

  2. <!doctype html>

  3. <html>

  4. <head>

  5. <meta charset="UTF-8">

  6. <title>angular js 控制器</title>

  7. <script src="angular.min.js"></script>

  8. <script type="text/javascript">

  9. // 自定义模块

  10. var app = angular.module('myApp', []);

  11. // 定义控制器

  12. app.controller('myController', function($scope){

  13. $scope.add = function(){

  14. return parseInt($scope.a) + parseInt($scope.b);

  15. }

  16. });

  17. </script>

  18. </head>

  19. <!-- 使用自定义模块和自定义控制器 -->

  20. <body ng-app='myApp' ng-controller='myController'>

  21. 加数：<input ng-model="a">

  22. 加数：<input ng-model="b">

  23. <!-- 调用add -->

  24. {{add()}}

  25. </body>

  26. </html>

（5）事件指令

 

  1. <!doctype html>

  2. <!doctype html>

  3. <html>

  4. <head>

  5. <meta charset="UTF-8">

  6. <title>angular js 事件指令</title>

  7. <script src="angular.min.js"></script>

  8. <script type="text/javascript">

  9. // 自定义模块

  10. var app = angular.module('myApp', []);

  11. // 定义控制器

  12. app.controller('myController', function($scope){

  13. $scope.add = function(){

  14. $scope.c = parseInt($scope.a) + parseInt($scope.b);

  15. }

  16. });

  17. </script>

  18. </head>

  19. <!-- 使用自定义模块和自定义控制器 -->

  20. <body ng-app='myApp' ng-controller='myController'>

  21. 加数：<input ng-model="a">

  22. 加数：<input ng-model="b">

  23. <!-- 使用按钮，给按钮绑定单击事件 -->

  24. <button ng-click='add()'>计算</button>

  25. 结果：{{c}}

  26. </body>

  27. </html>

 

（6）循环数组

 

  1. <!doctype html>

  2. <!doctype html>

  3. <html>

  4. <head>

  5. <meta charset="UTF-8">

  6. <title>angular js 循环数组</title>

  7. <script src="angular.min.js"></script>

  8. <script type="text/javascript">

  9. // 自定义模块

  10. var app = angular.module('myApp', []);

  11. // 定义控制器

  12. app.controller('myController', function($scope){

  13. $scope.list = [1,2,3,4];

  14. });

  15. </script>

  16. </head>

  17. <!-- 使用自定义模块和自定义控制器 -->

  18. <body ng-app='myApp' ng-controller='myController'>

  19. <table border="1">

  20. <!-- 循环获取list中的值 -->

  21. <!-- 使用 ng-repeat指令，x 为循环变量， list 为被循环的数组 -->

  22. <tr ng-repeat="x in list">

  23. <td>值：</td>

  24. <!-- 使用表达式拿到 数组中的值 -->

  25. <td>{{x}}</td>

  26. </tr>

  27. </table>

  28. </body>

  29. </html>

（7）循环对象数组

 

  1. <!doctype html>

  2. <!doctype html>

  3. <html>

  4. <head>

  5. <meta charset="UTF-8">

  6. <title>angular js 循环对象数组</title>

  7. <script src="angular.min.js"></script>

  8. <script type="text/javascript">

  9. // 自定义模块

  10. var app = angular.module('myApp', []);

  11. // 定义控制器

  12. app.controller('myController', function($scope){

  13. $scope.list = [

  14. {id:'1001',name:'张三',gender:'男'},

  15. {id:'1002',name:'李四',gender:'女'},

  16. {id:'1003',name:'王五',gender:'男'},

  17. ];

  18. });

  19. </script>

  20. </head>

  21. <!-- 使用自定义模块和自定义控制器 -->

  22. <body ng-app='myApp' ng-controller='myController'>

  23. <table border="1">

  24. <tr>

  25. <td>学号</td>

  26. <td>姓名</td>

  27. <td>性别</td>

  28. </tr>

  29. <tr ng-repeat="student in list">

  30. <!-- 通过对象导航方式获取值 -->

  31. <td>{{student.id}}</td>

  32. <td>{{student.name}}</td>

  33. <td>{{student.gender}}</td>

  34. </tr>

  35. </table>

  36. </body>

  37. </html>

（8）内置服务

我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http来实现。使用$http模拟请求，从后端获取数据，然后显示到页面上。注意：$http通过依赖注入的方式获得，即放在自定义控制器方法的第二个参数中的参数列表中。

 

  1. <html>

  2. <head>

  3. <title>入门小Demo-8 内置服务</title>

  4. <meta charset="utf-8" />

  5. <script src="angular.min.js"></script>

  6. <script>

  7. var app=angular.module('myApp',[]); //定义了一个叫myApp的模块

  8. //定义控制器

  9. app.controller('myController',function($scope,$http){

  10. $scope.findAll=function(){

  11. $http.get('data.json').success(

  12. function(response){

  13. $scope.list=response;

  14. }

  15. );

  16. }

  17. });

  18. </script>

  19. </head>

  20. <body ng-app="myApp" ng-controller="myController" ng-init="findAll()">

  21. <table>

  22. <tr>

  23. <td>姓名</td>

  24. <td>数学</td>

  25. <td>语文</td>

  26. </tr>

  27. <tr ng-repeat="entity in list">

  28. <td>{{entity.name}}</td>

  29. <td>{{entity.shuxue}}</td>

  30. <td>{{entity.yuwen}}</td>

  31. </tr>

  32. </table>

  33. </body>

  34. </html>

 

--------------------- 作者：GodBbb 来源：CSDN 原文：https://blog.csdn.net/qq1031893936/article/details/80945699?utm_source=copy 版权声明：本文为博主原创文章，转载请附上博文链接！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/696320
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号