AngularJS小结

最近、接到一个老项目需要维护开发新的功能。用到的技术栈主要是AngularJS、对于近几年一直用react、vue的前端来说还是有点不适应呢，早些年当vue和react还不温不火的时候用过。一个多年不用的技术栈差不多都遗忘了差不多了，现在就项目中运用到的一些api进行一些小小的总结；就当是巩固知识点了吧、有刚入行的同学可以参考；AngularJS 可以和react、vue一样构建一个单一页面SPA应用程序。
1、AngularJS 表达式写在双大括号内：{{ expression }}。

2、AngularJS 指令：如：ng-app 指令初始化一个 AngularJS 应用程序，ng-init 指令初始化应用程序数据，ng-model 指令把元素值（比如输入域的值）绑定到应用程序，ng-repeat 指令会重复一个 HTML 元素，你可以使用 .directive 函数来添加自定义的指令。

<script>

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

app.directive("runoobDirective", function() {

    return {

        template : "<h1>自定义指令!</h1>"

    };

});

</script>

3、AngularJS 控制器，ng-controller 指令定义了应用程序控制器
<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>

姓: <input type="text" ng-model="lastName"><br>

<br>

姓名: {{firstName + " " + lastName}}

</div>

<script>

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

app.controller('myCtrl', function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";

});

</script>
4、AngularJS 过滤器，可以使用一个管道字符（|）添加到表达式和指令中。

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

5、AngularJS 服务，是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务$location、$http、$timeout、$interval 服务等等、、可以参考官网

6、AngularJS事件，ng-click 指令定义了 AngularJS 点击事件

7、AngularJS依赖注入，依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖。一句话 --- 没事你不要来找我，有事我会去找你。

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：value、factory、service、provider、constant

8、AngularJS 路由

1、载入了实现路由的 js 文件：angular-route.js。

2、包含了 ngRoute 模块作为主应用模块的依赖模块。angular.module('routingDemoApp',['ngRoute'])

3、使用 ngView 指令<div ng-view></div>

4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

module.config(['$routeProvider', function($routeProvider){ $routeProvider

        .when('/',{template:'这是首页'})        .when('/computers',{template:'这是计算机页面'})        .when('/goods',{template:'这是商品页面'})        .otherwise({redirectTo:'/'});}]);

9、等等、、、、、、还有很多知识点。用到了再总结、、、、