大佬教程收集整理的这篇文章主要介绍了angularjs – 文件夹结构,登录设计,路由和grunt任务,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
描述
申请将有两个方面:
– 客户方.
– 管理员方面.
它们中的每一个都有单独的API,我将它们分成2个应用程序似乎是合乎逻辑的.
他们每个人都有自己的登录方式.
我的想法
app/ admin/ home/ home.tpl.html // admin home template admin.html // admin index,including templates via ng-view admin-api.js // admin api admin.js // admin app admin-login/ home/ home.tpl.html admin-login.html admin-login-api.js admin-login.js client/ home/ home.tpl.html client.html client-api.js client.js client-login/ home/ home.tpl.html client-login.html client-login-api.js client-login.js css/ fonts/ img/ js/ libs/
为什么要将登录与其他登录分开?因为我希望登录页面更轻(我不会加载相同的CSS / JS文件),并且如果@L_673_12@没有登录则无法访问其他文件/视图.
路由
如果我们将路由映射到此结构,它将提供如下内容:
/
应用程序/客户端/ client.html
/管理/
应用程序/管理/ admin.html
/管理/登入
应用程序/管理登录/管理员-的login.html
身份验证条件示例:
/
如果@L_673_12@已登录 – >显示主页
如果@L_673_12@未登录 – >重定向到/登录
咕噜声的任务
我将使用grunt-useref主要在一组常见的JS / CSS文件上执行自动concat和uglify.
<!-- build:js js/scripts.<%= pkg.version %>.min.js --> <!-- jQuery --> <script src="libs/jquery/jquery-1.11.1.js"></script> <!-- AngularJS --> <script src="libs/angularjs/angular.js"></script> <script src="libs/angularjs/angular-route.js"></script> <script src="libs/angularjs/angular-resource.js"></script> <!-- Our main application --> <script src="app/app.js" ></script> <!-- endbuild -->
目标是有一个地下室,然后在路线改变时(通过延迟加载)在其顶部添加其他JS / CSS文件.
关注
首先,我在这里学习并分享想法,所以我希望你对我所做的事情有所了解.
其次,如果我保留这个结构,我想知道如何管理主要路线
(/,/ login,/ admin /,/ admin / login)和@L_673_12@身份验证(但是对于这部分,已经有很多线程).
我想不处理这个服务器端,是否可以使用.htaccess或顶级Angular App?
更新1
我终于来到另一种方式来构建我的文件夹结构:
app/ admin/ home/ home.html // admin home view login/ login.html // admin login view login-api.html // admin login API login.js // admin login module admin.html // admin index,including templates via ng-view admin-api.js // admin api admin.js // admin module client/ // same goes for the client home/ home.tpl.html login/ login.html login-api.html login.js client.html client-api.js client.js common/ common.js // shared module app.js // main application,routIng to the other pages based on Auth css/ fonts/ img/ js/ libs/ locale/ index.html
index.html将提供我的主应用程序(app.js),它将根据@L_673_12@登录状态提供正确的模板.
我的目标是异步加载css和js文件,只有当前路由所需的文件.
app / app.js(草稿)
/* * app/app.js * * Our main application,handling routes * and lazy loading other modules / scripts * */ var app = angular.module('app',[ 'ngRoute','ngresource','ngTouch','ngAnimate' ]); /* * App configuration * */ app.config( ['$routeProvider','$LOCATIOnProvider',function( $routeProvider,$LOCATIOnProvider ) { $LOCATIOnProvider.hashPrefix('!'); /* * checks if a user is authorized to access a route * * @role (String) minimum role name required * */ var requireAuth = function ( role ) { return { load: function ( $q,$LOCATIOn ) { console.log('Can user access route?'); var deferred = $q.defer(),// TODO: replace isLoggedIn variable value by a function // to check if the user is actually logged in isLoggedIn = true; deferred.resolve(); if ( isLoggedIn === true ) { // fire $routeChangesuccess console.log('authorized'); return deferred.promise; } else { // fire $routeChangeError console.log('rejected'); $LOCATIOn.path('/login'); } } }; }; // Main application routes $routeProvider .when('/',{ templateUrl : 'app/client/home/home.html',resolve : requireAuth() }) .when('/login',{ templateUrl : 'app/client/login/login.html',resolve : requireAuth('anonymous') }) .when('/admin/',{ templateUrl : 'app/admin/home/home.html',resolve : requireAuth('admin') }) .when('/admin/login',{ templateUrl : 'app/admin/login/login.html',resolve : requireAuth('anonymous') }) .otherwise('/',resolve : requireAuth() }); }]);
更新2
经过更多的测试和研究,我想如果没有服务器端处理主要路由,我将无法做到这一点……
主要问题
>我没有找到在其他应用程序中包含应用程序的正确方法
>当重定向到登录页面时,仍然加载了请求的路径模板(例如:如果我从客户端重定向到客户端登录,它将加载app / client / home / home.html和app / client / login / login. HTML).
我的第一个结论
我绝对需要4个应用程序(客户端,客户端登录,管理员和管理员登录),因此他们每个人都有自己的路由,他们自己的主要index.html模板,因此,他们将真正独立于彼此.
他们每个人仍然可以访问常见的concat / minified文件,但他们也会加载自己的一堆文件.
@H_674_2@
这样你的应用程序将有两个主要文件app.js(客户端,管理员)
根据我的经验,在处理AngularJS时不需要加载jsFiles. Javassript Angular文件很短.并且由于AngularJS架构,您可以使用依赖注入来禁用不需要的功能.
您的文件结构很好,但是当您的应用程序变得越来越大时,您可以在每个模块子目录中创建:控制器,指令,过滤器,服务.我不建议将所有控制器保存在一个文件中(仅当它们很短时),但是当你的应用程序开发时,保持干净的dir结构可以帮助很多.
@H_674_2@ @H_674_2@以上是大佬教程为你收集整理的angularjs – 文件夹结构,登录设计,路由和grunt任务全部内容,希望文章能够帮你解决angularjs – 文件夹结构,登录设计,路由和grunt任务所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。