AngularJS小结

2021-12-07  本文已影响0人  邹小小白

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

上一篇下一篇

猜你喜欢

热点阅读