配置带有要求JS的Angular 材料

分享于 

16分钟阅读

Web开发

  繁體 雙語

介绍

在本文中,我将向你介绍我与 Angular-Material 配置的经验,其中包括的Require.js。 本文将介绍下面给出的以下几点:

  • Require.Js 材料配置
  • 在html页面中调用 Angular 材质日历控件
  • 提供源代码

背景

查看者应该具备 Angular的中间知识,需要 JS,HTML 5,CSS 3。 Require.js 是一个JavaScript类,用作模块化脚本加载程序。 模块化脚本加载程序将提高代码的速度和质量。

要了解有关 require js,的更多信息,请单击这里的

要了解有关 Angular 材质设计的更多信息,请单击这里的。

使用代码

我将使用 Visual Studio 2013 IDE创建一个新的angular材质应用。 你可以使用任何 IDE,也可以使用节点包管理器( npm ) 来下载这些包。 我想开始使用 angular.js angular-material.js 和 require.js 创建一个新应用程序。 开始吧。打开 vs 2013并创建一个新的空 web application和名称作为 DemoApp

现在从nuget包中添加一些js框架。 让我共享软件包列表。

<packages><packageid="Angular.Material"version="1.1.1"targetFramework="net451"/><packageid="angular-moment"version="0.10.3"targetFramework="net451"/><packageid="jQuery"version="3.1.1"targetFramework="net451"/><packageid="Moment.js"version="2.15.1"targetFramework="net451"/><packageid="RequireJS"version="2.3.2"targetFramework="net451"/></packages>

我还添加了一个名为 ui-router的库,以在 angular.js 中进行路由。 我从节点控制台下载了这个包。 你也可以直接从这里下载它,这里是。

现在,我将共享我的文件夹结构,如下所示:

https://www.codeproject.com/KB/Articles/1123309/image1.jpg

那么,让我来解释一下文件夹结构行。 ,angular-material.css 文件夹,下一个框架用于 Angular,angular材料,Jquery,等等所有的js框架。

下一个是主文件夹,保存所有自定义js文件,如控制器,directive filters filters等等。

现在,我将在 main.js 和 app.js 文件中添加另外两个js文件,名为。

让我们从 main.js 文件开始,用来配置所有js库。 下面给出了代码。

require.config({
 urlArgs: "v=" + new Date().getTime(),
 waitSeconds: 300,
 baseUrl: "/",
 paths: {
 app: "main/app",
 angular: "libs/angular/angular.min",
 uirouter: "libs/ui-router/angular-ui-router.min",
 jquery: "libs/jquery/jquery-3.1.1.min",
 ngMaterial: 'libs/angular-material/angular-material.min',
 'ng-animate': 'libs/angular-animate/angular-animate.min',
 ngAria: 'libs/angular-aria/angular-aria.min',
 ngMessages: 'libs/angular-messages/angular-messages.min',
 'hammer': 'libs/hammer/hammer.min',
 'hammerProxy': 'main/hammer-proxy' }

创建 require 对象并调用 config 方法。 在 config 方法中,我们的第一个参数是 urlArgs ->"v=" + new Date().getTime() 这里参数用于在加载时对js文件进行版本控制,它将解决缓存问题。

下一个是 waitSeconds : n milliseconds 用于告诉请求js等待n 秒,然后放弃加载脚本。 默认情况下,它是 7毫秒。

下一个是 baseUrl: baseUrl 通常设置为与用于页面加载的顶层脚本的data-main 属性中的脚本相同的目录。 data-main 属性在 index.html 页或者页page页中定义。

<!--This sets the baseUrl to the"scripts" directory, 
and loads a script that will have a module ID of 'main'--><scriptdata-main="scripts/main.js"src="scripts/require.js"></script>

下一节是 paths: Path 对象包含库 namePath的键值对,你可以自己定义 namepaths 是库路径。

shim: {
 app: {
 exports: "app",
 deps: [
 "angular", "ngMessages", "ngMaterial", 
 "uirouter", "hammer", "hammerProxy" ]
 }

下一节是 Shim: shim 配置依赖项。导出和自定义初始化。 shim 配置仅用于非amd脚本。 inside shim 配置对象用于在索引或者默认页的intialisation时加载重要依赖项。 加载依赖项之后,它将把全局变量应用导出为模块级。 为模块创建一个空的对象,可以立即为模块创建一个空对象,供其他模块立即参考。

现在让我们共享 main.js 文件的代码。

require.config({
 urlArgs: "v=" + new Date().getTime(),
 waitSeconds: 300,
 baseUrl: "/",
 paths: {
 app: "main/app",
 angular: "lib/angular/angular.min",
 uirouter: "lib/ui-router/angular-ui-router.min",
 jquery: "lib/jquery/jquery-3.1.1.min",
 ngMaterial: 'lib/angular-material/angular-material.min',
 'ng-animate': 'lib/angular-animate/angular-animate.min',
 ngAria: 'lib/angular-aria/angular-aria.min',
 ngMessages: 'lib/angular-messages/angular-messages.min',
 'hammer': 'lib/hammer/hammer.min',
 'hammerProxy': 'main/hammer-proxy' },
 shim: {
 app: {
 exports: "app",
 deps: [
 "angular", "ngMessages", "ngMaterial", "uirouter", "hammer", "hammerProxy" ]
 },
 angular: {
 exports: "angular" },
 jquery: {
 exports: "$" },
 uirouter: {
 deps: [
 "angular" ]
 },
 'ng-animate': {
 deps: ['angular']
 },
 ngAria: {
 deps:[ 'angular']
 },
 ngMessages : {
 deps: ['angular']
 },
 hammerProxy:
 {
 deps: ['hammer']
 },
 hammer:{
 exports: "Hammer" },
 ngMaterial: {
 deps: ['angular', 'ng-animate', 'ngAria']
 }
 }
});

deps: 首先解析依赖模块的依赖关系,然后加载实际模块。 就像 ngMessages 需要加载 angular.js。

现在代码行数少了几行:

require(["app", "jquery", "main/routes/route", "main/utility/menuUtility"], function () {
 angular.element(document).ready(function () {
 angular.bootstrap(document, ["angbaseApp"]); // this line is used to bootstrap the angular //and add the 'angbaseApp' as module, it means no need to add the ng-module explicitly. });
});

在 上面 代码行中,我注入全局模块应用程序,jquery和更多的文件。 在dom准备好之前,需要所有这些脚本。 现在我们的main.js 已经准备好了。

现在,我将创建一个 app.js 文件。

define(["app"], function () {
 var app = angular.module("angbaseApp", [ "ui.router", 
 "ngAnimate", "ngAria", "ngMessages", "ngMaterial"]);
 // Here"app" global module register all the providers // To know more about providers follow the angular online documentation. app.config(function ($routeProvider, $controllerProvider, $provide, $compileProvider, $filterProvider, $httpProvider) {
 app.register = {
 controller: $controllerProvider.register,
 directive: $compileProvider.directive,
 filter: $filterProvider.register,
 factory: $provide.factory,
 service: $provide.service
 }; 
 }); 
 //Configure the angular-material theme. app.config(function($mdThemingProvider) {
 $mdThemingProvider.theme('dark-blue').backgroundPalette('blue').dark();
 });
 return app;
});

本文的代码中,我使用了定义来定义模块,在requirejs模块中是模块 Pattern ( JavaScript )的一个扩展。

在第一行中,我定义了全局应用程序模块。 如果有更多的模块,那么这些模块有依赖关系,那么我们也将定义这些模块。

define(["app","main/services/accountService","main/utility/requestHeader"] 像这里,我定义了一个 accountServicerequestHeader 模块。

我们将注入所有的Angular 模块,并将执行所有需要的Angular 配置。

现在,我将添加一个 route.js 文件来路由我们的Angular 应用程序。 下面给出了代码:

define(['app'], function (app) {
 'use strict';
 return app.config(['$stateProvider', '$urlRouterProvider', 
 function ($stateProvider, $urlRouterProvider) {
 $urlRouterProvider.otherwise('/')
 $stateProvider 
. state('RequireLand', {
 url: '/RequireLand',
 templateUrl: 'view/partial/view_demo.html', 
 resolve: {
 load: function ($q, $rootScope) {
 var defer = $q.defer();
 require(["main/controllers/requireEnableCtrl"], function () {
 defer.resolve();
 $rootScope.$apply();
 });
 return defer.promise;
 }
 },
 controller: "MainCtrl" }) 
 }]);
}); 

Define 已经讨论过,在使用 ui.route 和注入'$stateProvider'和'$urlRouterProvider'时,我对路由进行了单独的配置,并不会讨论 ui.route 库。 请阅读 ui-route的联机文档。

在 上面 代码行中,我定义了一个名为'RequireLand'的状态,定义路由的url,模板 url,并将控制器解析到这个状态。 它将解析控制器文件及其依赖关系。

现在,我将为 angular控制器 添加一个更多的js文件,命名为'requireEnableCtrl',模块名是 MainCtrl。 我将在下面共享我的代码。

define(["app"], function (app) {
 // We register a controller here app.register.controller("MainCtrl", function ($scope, $rootScope, $state) {
 // Few lines of code for my angular-material calender control. $scope.myDate = new Date();
 $scope.minDate = new Date(
 $scope.myDate.getFullYear(),
 $scope.myDate.getMonth() - 2,
 $scope.myDate.getDate());
 $scope.maxDate = new Date(
 $scope.myDate.getFullYear(),
 $scope.myDate.getMonth() + 2,
 $scope.myDate.getDate());
 $scope.onlyWeekendsPredicate = function (date) {
 var day = date.getDay();
 return day === 0 || day === 6;
 }; 
 });
});

现在,我将向 menuUtility.js 文件添加缺省路径,或者你可以使用它来进行基本的初始化,比如动态菜单和所有的文件。 下面给出了这里文件的代码。

我用这个来重定向路线。

define(["app"], function (app) {
 app.controller("MenuCtrl", function ($scope, $rootScope, $state) {
 //this will tell default page to load state RequiredLand// And it will load the partial page i.e, already configured in routejs file $state.go('RequireLand'); 
 });
});

现在,我将为视图添加一个文件夹结构。 it视图和视图- 共享视图的共享视图。header。footer和所有视图的共享视图。

让我在这里共享我的html代码。 首先,我想为我的目标页面添加一个 default.html 文件,然后我将添加部分视图文件。 下面给出了两个文件的代码。

//code for default.html file<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>Report System</title><linkhref="content/angular-material.min.css"rel="stylesheet"/></head><bodyng-controller="MenuCtrl"><scriptdata-main="main/main.js"src="libs/require/require.js"></script>/* ng-clock directive and other ui-view directive 
 read the online documentation of angular and ui-router documentation */
 <divng-cloak> 
 <ui-view></ui-view></div></body></html>

现在,我将添加一个名为 view_demo.html的HTML页面,它是部分页面。 下面给出了代码。

<divlayout="column"layout-align="center center"><md-cardmd-theme-watch><md-card-title><md-card-title-text><spanclass="md-headline">Card with image</span><spanclass="md-subhead">Extra Large</span></md-card-title-text></md-card-title><md-card-contentlayout="row"layout-align="space-between"><divclass="md-media-xl card-media"><divflex-gt-xs><h4>Standard date-picker</h4><md-datepickerng-model="myDate"md-placeholder="Enter date"></md-datepicker></div></div><md-card-actionslayout="column"><md-buttonclass="md-icon-button"aria-label="Favorite"><md-iconmd-svg-icon="img/icons/favorite.svg"></md-icon></md-button><md-buttonclass="md-icon-button"aria-label="Settings"><md-iconmd-svg-icon="img/icons/menu.svg"></md-icon></md-button><md-buttonclass="md-icon-button"aria-label="Share"><md-iconmd-svg-icon="img/icons/share-arrow.svg"></md-icon></md-button></md-card-actions></md-card-content></md-card></div>

此页定义内置的角度材质指令。 有关详细信息,你可以查看联机文档。 我创建一个带有 datepicker 控件的卡。

现在我们将使用属性 data-main 和 require.js 文件在 script 元素内部调用 main.js 文件,使用 src 属性。 我已经写了这一行,你需要在你的主页上写这一行,我在我的default.html 页面中写了这行。

<scriptdata-main="main/main.js"src="libs/require/require.js"></script>

现在,我要浏览我的default.html。

https://www.codeproject.com/KB/Articles/1123309/image2.jpg

Points of Interest

我希望你喜欢这篇文章。 源代码已经附加。 我试图覆盖基本的要求配置,了解更多关于 requirejs,angularjs,angular-materialjs。 阅读他们提供的在线文档。

  • 要求在这里单击
  • Angular 单击这里的
  • 角度材质单击这里的

Angularjs基本上提供了一个基于模块的注入,Requirejs提供了一个基于( js文件)的注入。

如果这个帖子能帮助你,请在这篇文章中注明。 谢谢你。

历史记录

  • 第五 2016年10月: 初始版本

相关文章