• 从es6到AngularJS入门

    AngularJS是一个前端框架，入门难度对不同基础的人来说是不同的，这里假设是对es6具有熟练的基础，同时对MVC比较熟练。

    AngularJS是一种MVC模式下的前端框架，这本身与js面向过程是有不和谐的地方，但是当用AnguarJS组织前端整体结构，形成MVC模式，方法中采用js面向过程时，这又深深的切合了面向对象的要点，变得和谐统一。

    AngularJS的特点：

    1、面向对象风格

    2、具有类似于spring框架的依赖注入特性

    3、支持单页面应用，可使用路由组织页面的切换、解析

    4、可以使用MVC结构，对service层做分离，以服务的方式注入

    5、angular.module方法是对视图层以外内容的处理，更多体现了对controller层的处理，如引入服务、提供初始化数据、提供事件响应支持、切换页面等

    6、在视图中，以ng-app 属性指定module对应的解析区域，支持双向绑定、表单验证、事件定义等

    7、封装了Ajax的API，简单易用，数据解析可以同框架本身的过滤器和表格等特性联用，降低了处理难度

    8、视图部分可以切换为第三方的视图框架，如Bootstrap、Element UI等

    9、适应于CURD的业务应用，不适用于频繁的底层DOM结构操作

    示例代码如下：

    1. html>
    2.  
    3. <html ng-app='myApp' ng-controller='myctl'>
    4.  
    5. <head>
    6.  
    7. <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">script>
    8.  
    9. head>
    10.  
    11. <body>
    12.  
    13. <form class="simple-form">
    14.  
    15. Name: <input type="text" ng-model="user.name" required/><br />
    16.  
    17. E-mail: <input type="email" ng-model="user.email" required/><br />
    18.  
    19. <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
    20.  
    21. <span ng-show="form.uEmail.$error.required">Tell us your email.span>
    22.  
    23. <span ng-show="form.uEmail.$error.email">This is not a valid email.span>
    24.  
    25. div>
    26.  
    27. Gender: <input type="radio" ng-model="user.gender" value="male" />male
    28.  
    29. <input type="radio" ng-model="user.gender" value="female" />female<br />
    30.  
    31. <input type="checkbox" ng-model="user.agree" name="userAgree" required />
    32.  
    33. I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign"
    34.  
    35. required /><br />
    36.  
    37. <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.div>
    38.  
    39. <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESETbutton>
    40.  
    41. <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">SAVEbutton>
    42.  
    43. form>
    44.  
    45. <pre>form = {{user | json}} pre>
    46.  
    47. <pre>master = {{master | json}} pre>
    48.  
    49. body>
    50.  
    51. <script>
    52.  
    53. angular.module('myApp',[])
    54.  
    55. .controller('myctl',function($scope){
    56.  
    57. $scope.master={};
    58.  
    59.  
    60.  
    61. $scope.update=function(user){//update event
    62.  
    63. $scope.master=angular.copy(user);
    64.  
    65. $http({
    66.  
    67. method:'POST',
    68.  
    69. url:'http://127.0.0.1:8080/user/update',
    70.  
    71. user:$scope.use
    72.  
    73. }).then(function correct(result){
    74.  
    75. $scope.master=result.user;
    76.  
    77. },function error(result){
    78.  
    79. console.log(error);
    80.  
    81. });
    82.  
    83. }
    84.  
    85.  
    86.  
    87. $scope.reset=function(){// back event
    88.  
    89. $scope.user=angular.copy($scope.master);
    90.  
    91. }
    92.  
    93. $scope.inUnchanged=function(user){// compare event
    94.  
    95. return angular.equals(user,$scope.master);
    96.  
    97. }
    98.  
    99.  
    100.  
    101. $scope.reset(); // set to empty value when init
    102.  
    103. });
    104.  
    105. script>
    106.  
    107. html>

    示例代码中展示了AngularJS常用的基本功能：

    1、视图绑定、设定视图区域

    2、数据初始化

    3、表单验证

    4、双向绑定

    5、数据提交远程服务器

    6、事件处理

    7、数据过滤

    AngularJS的功能要比上面细致很多，需要到官网上仔细研读。

  • 相关阅读:
    Python接口自动化测试实战详解，你想要的全都有
    vue通过一组id匹配另一个数组中的对象
    msyql事务ACID特性及其实现原理
    Nginx浏览器缓存
    SAP MRP中的滚动提前期简介（MRP自动删除已固定计划订单）
    linux(nginx安装配置，tomcat服务命令操作)
    SQLServer和Oracle，存储过程区别，常用函数对比
    leetcode题刷250天(87)——654. 最大二叉树(DFS)
    TrackBar控件
    CICD命令
  • 原文地址：https://blog.csdn.net/seacean2000/article/details/125897559