本篇文章通过介绍Angular5.1新特性给大家详细分享了的5.1改进和增加的内容,以下是全部内容:

在前面的几个文章中,我们的数据都是以函数的方式定义在全局的作用域下,这样很显然是不对的,没有模块化的思想,下面的例子介绍Angular的模块化!

新特性

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>AngularJs模块化</title>
<script type="text/javascript"src="https://code.angularjs.org/1.3.8/angular.min.js">
</head>
<body>
<div ng-controller='Aaa'>
  <p>{{name}}</p>
</div>
<div ng-controller='Bbb'>
  <p>{{name}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
//参数1:模块的名字,参数2:当前模块中依赖的模块,後面的文章会介绍
m1.controller('Aaa',function($scope){
  $scope.name = 'hello AngularJs';
});
m1.controller('Bbb',function($scope){
  $scope.name = 'Hi';
});
</script>
</body>
</html>

Angular Material和CDK稳定版

首先在html上绑定初始化的名称,并附上myApp,使用angular.model在JS中定义多个模块,并附上参数。

CLI中支持Service Worker

再使用控制器定义数据,注意控制器传递的参数,模块名和匿名函数。

在CLI中改进了Universal和AppShell的支持

都知道我们的项目在上线後合并压缩的,这样我们匿名函数传递的形参在压缩後出现问题,所以这个时候我们需要将参数包裹成数组,来避免压缩的问题!

改进了装饰器的错误信息

m1.controller('Aaa',['$scope',function($scope){
  $scope.name = 'hello AngularJs';
}]);
m1.controller('Bbb',['$scope',function($scope){
  $scope.name = 'Hi';
}]);

支持TypeScript2.5

 这个时候注意控制器传递的参数,模块名和数组(包含服务和匿名函数)。

有关功能和bug修复的完整列表,请参阅Angular,Material和CLI的更新日志。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

Angular Material和CDK稳定版

您可能感兴趣的文章:

  • 详解利用Angular实现多团队模块化SPA开发框架
  • angular.js +
    require.js构建模块化单页面应用的方法步骤
  • 简单谈谈require模块化jquery和angular的问题
  • 详解AngularJS 模块化
  • AngularJS入门教程之模块化操作用法示例
  • AngularJS
    模块化详解及实例代码
  • AngularJS
    应用模块化的使用

在发布了11个alpha版本,12个beta版本以及3个候选版本之后,我们很高兴现在能够标记Angular
Material和Angular CDK的5.0.0的稳定版。基于Google的Material
Design视觉设计语言,Angular
Material提供了30个UI组件给你的Angular应用。组合使用Angular CDK,Angular
CDK(组件开发工具包)提供了一组构建模块,帮组您构建自己的定制组件,而不需要再次解决常见问题。这些组件已经被许多GOogle应用程序(包括Google
Analytics套件,Google云平台开发人员控制台以及Google Shopping
Express)用于生产。

从这个版本开始,Angular
Material将遵循与Angular相同的语义化哲学,主版本的Angular
Materital和Angular
CDK同时作为其它平台的主版本发布。bug修复的版本将按照每周的迭代进行,而次版本将在功能完成时发布。

访问matrial.angular.io获取文档,演示和我们的入门指南。你还可以在Github上跟进我们的进度,因为我们将继续为框架添加更多类容。在接下来的几个月中,请关注诸如新的mat-tree,virtual
scrolling,组件测试套件以及拖放功能。

CLI1.6的Service Worker支持

性能一直是Web开发人员的一个重要目标,在今天的局域网WIFI和移动网络事件中,性能一直是一个重要的目标。现代浏览器有一个新的API用于构建可靠且快速加载的站点,称为Service
Worker API。

Angular5.0.0附带了一个为Angular应用程序定制的新的Service
Worker实现,而Angular CLI
1.6包含了支持利用这个新特性构建应用的功能。使用@angular/service-worker可以提升你的应用的加载性能在支持该API的浏览器中,以及使你的应用的加载体验更像是本地app。

在我们的文档网站中,学习更多关于Angular Service的内容。

CLI1.6 改进Universal和App Shell支持

此外,随着Angular
CLI1.6的发布,更好的通过Schematics将Universal添加到你现有的项目中,并为App
Shell提供支持。

Angular Universal

添加Universal到你当前的CLI项目中,你可以在你的项目目录下使用下面的命令:

npm generate universal <name>

用你想给你的应用程序的名字替换<name>。这将会采用你采用的应用程序,并创建一个通用的模块,并为你自动配置你的angular-cli.json文件。然后你可以跳到我们的指南中的第4步使用Universal。

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章