最近、接到一个老项目需要维护开发新的功能。用到的技术栈主要是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、等等、、、、、、还有很多知识点。用到了再总结、、、、
网友评论