AngularJs实战学习（-）

Posted 2020-07-01

AngularJs学习有一段时间了，前几天做了一项目。做完后想使用才学习的Angular试试水，结果出乎意料（学的太基础尽然不知道从那下手，还是纠结）

最后还是去慕课网看了“大漠穷秋”的“AngularJS实战”的视频才有些基础，希望能让我理解其中的知识。

 

1、Angular的4大核心特性：

     MVC（职责清晰，代码模块化）

     模块化（MVC是手段，终极目标是模块化）

     指令系统（AngularJs不会去直接去操作Dom，都是使用指令系统去处理Dom）

     双向数据绑定

  angularJs特有的指令系统和双向数据绑定

 

2、在讲了4大核心的东西后花了很大的篇幅去讲现在做前端开发需要的环境，有需要的可以去看一下链接

 

3、controller（控制器）的使用过程中的注意点

  1.不要试图去复用Controller，一个控制器一般只负责一小块视图；

  2.不要在Controller中操作DOM，这不是控制器的责任（使用指令系统）；

  3.不要在Controller里面做数据格式化，ng有很好的表单控件；

  4.不要在Controller里面做数据过滤操作，ng有￥filter服务；

  5.一般来说，Controller是不会互相调用，控制器直接交互回通过事件进行；

 

4、路由

   路由是控制器一个很重要的功能；

   使用angular的路由功能需要安装routing模块...（引入angular-route.js就可以了）

   定义：使用路由非常容易，在我们的应用mian模块里面注入ngRoute依赖就可以了

   

var bookStoreApp = angular.module(‘bookStoreApp‘, [
    ‘ngRoute‘, ‘ngAnimate‘, ‘bookStoreCtrls‘, ‘bookStoreFilters‘,
    ‘bookStoreServices‘, ‘bookStoreDirectives‘
]);

bookStoreApp.config(function($routeProvider) {
    $routeProvider.when(‘/hello‘, {
        templateUrl: ‘tpls/hello.html‘,
        controller: ‘HelloCtrl‘
    }).when(‘/list:id‘,{
        templateUrl:‘tpls/bookList.html‘,
        controller:‘BookListCtrl‘
    }).otherwise({
        redirectTo: ‘/hello‘
    })
});

  routeProvider只有两个方法分别是when() 和otherwise()

  when()

 

when()方法有两个参数，我们希望匹配的浏览器url和路由操作对象。一般main route经常使用“/”来表示，也可以定义URL参数，在controller里面就使用$routeParams获取url参数。

 

• templateUrl: 表示路由跳转的view模板

• controller: 控制器

 otherwise()

otherwise()定义了当应用找不到指定路由的时候跳转的路由