AngularJS- 每个路由和控制器中的登录和身份验证

     2023-02-15     57

关键词:

【中文标题】AngularJS- 每个路由和控制器中的登录和身份验证【英文标题】:AngularJS- Login and Authentication in each route and controller 【发布时间】:2014-01-25 00:42:46 【问题描述】:

我有一个使用 yeoman、grunt 和 bower 创建的 AngularJS 应用程序。

我有一个登录页面,其中有一个用于检查身份验证的控制器。如果凭据正确,我会重新路由到主页。

app.js

'use strict';
//Define Routing for app
angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
  function($routeProvider,$locationProvider) 
    $routeProvider
    .when('/login', 
        templateUrl: 'login.html',
        controller: 'LoginController'
    )
    .when('/register', 
        templateUrl: 'register.html',
        controller: 'RegisterController'
      )
    .when('/forgotPassword', 
        templateUrl: 'forgotpassword.html',
        controller: 'forgotController'
      )
   .when('/home', 
       templateUrl: 'views/home.html',
       controller: 'homeController'
    )
    .otherwise(
       redirectTo: '/login'
    );
//    $locationProvider.html5Mode(true); //Remove the '#' from URL.
]);

angular.module('myApp').factory("page", function($rootScope)
    var page=;
    var user=;
    page.setPage=function(title,bodyClass)
        $rootScope.pageTitle = title;
        $rootScope.bodylayout=bodyClass;
    ;
    page.setUser=function(user)
        $rootScope.user=user;
    
    return page;
);

LoginControler.js

'use strict';

angular.module('myApp').controller('LoginController', function($scope, $location, $window,page) 
    page.setPage("Login","login-layout");
    $scope.user = ;
    $scope.loginUser=function()
    
        var username=$scope.user.name;
        var password=$scope.user.password;
        if(username=="admin" && password=="admin123")
        
            page.setUser($scope.user);
            $location.path( "/home" );
        
        else
        
            $scope.message="Error";
            $scope.messagecolor="alert alert-danger";
        
    
);

在我的主页上

<span class="user-info">
    <small>Welcome,</small>
    user.name
</span>
<span class="logout"><a href="" ng-click="logoutUser()">Logout</a></span>

loginController 中,我检查登录信息,如果成功,我在服务工厂中设置用户对象。我不知道这是否正确。

我需要的是,当用户登录时,它会在用户对象中设置一些值,以便所有其他页面都可以获取该值。

每当路由发生变化时,控制器应该检查用户是否登录。如果不是,它应该重新路由到登录页面。此外,如果用户已经登录并返回该页面,它应该转到主页。控制器还应该检查所有路由的凭据。

我听说过 ng-cookies,但我不知道如何使用它们。

我看到的许多示例都不是很清楚,它们使用了某种访问角色或其他东西。我不想要那个。我只想要一个登录过滤器。 有人可以给我一些想法吗?

【问题讨论】:

【参考方案1】:

我的解决方案分为 3 个部分:用户的状态存储在服务中,在您观察路由更改时的 run 方法中,并在您的主控制器中检查是否允许用户访问请求的页面你观察用户的状态是否改变。

app.run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) 
    $rootScope.$on('$routeChangeStart', function (event) 

        if (!Auth.isLoggedIn()) 
            console.log('DENY');
            event.preventDefault();
            $location.path('/login');
        
        else 
            console.log('ALLOW');
            $location.path('/home');
        
    );
]);

您应该创建一个服务(我将其命名为Auth),它将处理用户对象并有一个方法来了解用户是否已登录。

服务

 .factory('Auth', function()
var user;

return
    setUser : function(aUser)
        user = aUser;
    ,
    isLoggedIn : function()
        return(user)? user : false;
    
  
)

从您的app.run,您应该收听$routeChangeStart 事件。当路由改变时,它会检查用户是否登录(isLoggedIn 方法应该处理它)。如果用户未登录,它将不会加载请求的路由,并将用户重定向到正确的页面(在您的情况下登录)。

应该在您的登录页面中使用loginController 来处理登录。它应该只与Auth 服务交互并将用户设置为是否登录。

登录控制器

.controller('loginCtrl', [ '$scope', 'Auth', function ($scope, Auth) 
  //submit
  $scope.login = function () 
    // Ask to the server, do your job and THEN set the user

    Auth.setUser(user); //Update the state of the user in the app
  ;
])

在您的主控制器中,您可以监听用户状态是否发生变化并响应重定向。

.controller('mainCtrl', ['$scope', 'Auth', '$location', function ($scope, Auth, $location) 

  $scope.$watch(Auth.isLoggedIn, function (value, oldValue) 

    if(!value && oldValue) 
      console.log("Disconnect");
      $location.path('/login');
    

    if(value) 
      console.log("Connect");
      //Do something when the user is connected
    

  , true);

【讨论】:

loginController 将允许用户从登录页面登录。它将处理登录表单。表单必须调用作为 loginController 一部分的提交方法。此方法将更新(如果表单正确且用户必须登录)使用我描述的 Auth 服务的用户状态。 工作就像一个魅力!我使用Auth0 with AngularJS,而不是提供的服务。 如果用户按F5刷新怎么办?那么你在内存中的 Auth 就消失了。 以防其他人在运行此示例时遇到问题:在routeChangeStart 回调中,您应该检查位置是否实际上是“/login”并允许:if ( $location.path() === "/login" ) return; 它让我陷入无限循环。【参考方案2】:

这是另一种可能的解决方案,使用$stateProvider$routeProviderresolve 属性。以$stateProvider 为例:

.config(["$stateProvider", function ($stateProvider) 

  $stateProvider

  .state("forbidden", 
    /* ... */
  )

  .state("signIn", 
    /* ... */
    resolve: 
      access: ["Access", function (Access)  return Access.isAnonymous(); ],
    
  )

  .state("home", 
    /* ... */
    resolve: 
      access: ["Access", function (Access)  return Access.isAuthenticated(); ],
    
  )

  .state("admin", 
    /* ... */
    resolve: 
      access: ["Access", function (Access)  return Access.hasRole("ROLE_ADMIN"); ],
    
  );

])

Access 根据当前用户权限解析或拒绝承诺:

.factory("Access", ["$q", "UserProfile", function ($q, UserProfile) 

  var Access = 

    OK: 200,

    // "we don't know who you are, so we can't say if you're authorized to access
    // this resource or not yet, please sign in first"
    UNAUTHORIZED: 401,

    // "we know who you are, and your profile does not allow you to access this resource"
    FORBIDDEN: 403,

    hasRole: function (role) 
      return UserProfile.then(function (userProfile) 
        if (userProfile.$hasRole(role)) 
          return Access.OK;
         else if (userProfile.$isAnonymous()) 
          return $q.reject(Access.UNAUTHORIZED);
         else 
          return $q.reject(Access.FORBIDDEN);
        
      );
    ,

    hasAnyRole: function (roles) 
      return UserProfile.then(function (userProfile) 
        if (userProfile.$hasAnyRole(roles)) 
          return Access.OK;
         else if (userProfile.$isAnonymous()) 
          return $q.reject(Access.UNAUTHORIZED);
         else 
          return $q.reject(Access.FORBIDDEN);
        
      );
    ,

    isAnonymous: function () 
      return UserProfile.then(function (userProfile) 
        if (userProfile.$isAnonymous()) 
          return Access.OK;
         else 
          return $q.reject(Access.FORBIDDEN);
        
      );
    ,

    isAuthenticated: function () 
      return UserProfile.then(function (userProfile) 
        if (userProfile.$isAuthenticated()) 
          return Access.OK;
         else 
          return $q.reject(Access.UNAUTHORIZED);
        
      );
    

  ;

  return Access;

])

UserProfile复制当前用户属性,并实现$hasRole$hasAnyRole$isAnonymous$isAuthenticated方法逻辑(加上$refresh方法,后面解释):

.factory("UserProfile", ["Auth", function (Auth) 

  var userProfile = ;

  var clearUserProfile = function () 
    for (var prop in userProfile) 
      if (userProfile.hasOwnProperty(prop)) 
        delete userProfile[prop];
      
    
  ;

  var fetchUserProfile = function () 
    return Auth.getProfile().then(function (response) 
      clearUserProfile();
      return angular.extend(userProfile, response.data, 

        $refresh: fetchUserProfile,

        $hasRole: function (role) 
          return userProfile.roles.indexOf(role) >= 0;
        ,

        $hasAnyRole: function (roles) 
          return !!userProfile.roles.filter(function (role) 
            return roles.indexOf(role) >= 0;
          ).length;
        ,

        $isAnonymous: function () 
          return userProfile.anonymous;
        ,

        $isAuthenticated: function () 
          return !userProfile.anonymous;
        

      );
    );
  ;

  return fetchUserProfile();

])

Auth 负责请求服务器,以了解用户配置文件(例如链接到附加到请求的访问令牌):

.service("Auth", ["$http", function ($http) 

  this.getProfile = function () 
    return $http.get("api/auth");
  ;

])

服务器在请求GET api/auth时期望返回这样一个JSON对象:


  "name": "John Doe", // plus any other user information
  "roles": ["ROLE_ADMIN", "ROLE_USER"], // or any other role (or no role at all, i.e. an empty array)
  "anonymous": false // or true

最后,当Access拒绝一个promise时,如果使用ui.router$stateChangeError事件将被触发:

.run(["$rootScope", "Access", "$state", "$log", function ($rootScope, Access, $state, $log) 

  $rootScope.$on("$stateChangeError", function (event, toState, toParams, fromState, fromParams, error) 
    switch (error) 

    case Access.UNAUTHORIZED:
      $state.go("signIn");
      break;

    case Access.FORBIDDEN:
      $state.go("forbidden");
      break;

    default:
      $log.warn("$stateChangeError event catched");
      break;

    
  );

])

如果使用ngRoute$routeChangeError 事件将被触发:

.run(["$rootScope", "Access", "$location", "$log", function ($rootScope, Access, $location, $log) 

  $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) 
    switch (rejection) 

    case Access.UNAUTHORIZED:
      $location.path("/signin");
      break;

    case Access.FORBIDDEN:
      $location.path("/forbidden");
      break;

    default:
      $log.warn("$stateChangeError event catched");
      break;

    
  );

])

也可以在控制器中访问用户配置文件:

.state("home", 
  /* ... */
  controller: "HomeController",
  resolve: 
    userProfile: "UserProfile"
  
)

UserProfile 则包含服务器在请求GET api/auth 时返回的属性:

.controller("HomeController", ["$scope", "userProfile", function ($scope, userProfile) 

  $scope.title = "Hello " + userProfile.name; // "Hello John Doe" in the example

])

UserProfile 需要在用户登录或注销时刷新,以便Access 可以使用新用户配置文件处理路由。您可以重新加载整个页面,或致电UserProfile.$refresh()。登录示例:

.service("Auth", ["$http", function ($http) 

  /* ... */

  this.signIn = function (credentials) 
    return $http.post("api/auth", credentials).then(function (response) 
      // authentication succeeded, store the response access token somewhere (if any)
    );
  ;

])
.state("signIn", 
  /* ... */
  controller: "SignInController",
  resolve: 
    /* ... */
    userProfile: "UserProfile"
  
)
.controller("SignInController", ["$scope", "$state", "Auth", "userProfile", function ($scope, $state, Auth, userProfile) 

  $scope.signIn = function () 
    Auth.signIn($scope.credentials).then(function () 
      // user successfully authenticated, refresh UserProfile
      return userProfile.$refresh();
    ).then(function () 
      // UserProfile is refreshed, redirect user somewhere
      $state.go("home");
    );
  ;

])

【讨论】:

我喜欢这个答案,而不是 deferred.reject(Access.FORBIDDEN);我会将其保留给 api 调用(超出限制)。从用户访问页面时的角度来看,它们要么正常,要么未经授权。 @LeblancMeneses 谢谢 :) 只是为了更清楚一点:未经授权的意思是 “我们不知道你是谁,所以我们不能说你是否有权访问此资源或还没有,请先登录”,而 FORBIDDEN 表示“我们知道您是谁,您的个人资料不允许您访问此资源” 不错的解决方案,可能适合服务器端的 Spring 身份验证 @jsbisht 这完全取决于您存储访问令牌的位置(请参阅最后一个 sn-p)。如果您将其存储在 JS 内存中,则可以:F5 将删除身份验证信息。但是如果你将它存储在持久存储中(例如 cookie/localStorage/sessionStorage),那么不会:F5 不会删除身份验证信息(只要你将令牌附加到每个 $http 请求,或者至少附加到发送到rest/users/profile,因为服务器应该返回链接到附加令牌的用户的配置文件)。不过在使用 cookie 存储时要小心 CSRF。 @DeanWhitehouse 你可以在任何地方注入UserProfile,然后例如使用UserProfile.then(function (userProfile) $scope.userProfile = userProfile; /* + start watching... */ )【参考方案3】:

为单个路由定义自定义行为的最直接方式非常简单:

1) routes.js:为任何所需路线创建一个新属性(如requireAuth

angular.module('yourApp').config(function($routeProvider) 
    $routeProvider
        .when('/home', 
            templateUrl: 'templates/home.html',
            requireAuth: true // our custom property
        )
        .when('/login', 
            templateUrl: 'templates/login.html',
        )
        .otherwise(
            redirectTo: '/home'
        );
)

2) 在未绑定到ng-view 内的元素的***控制器中(以避免与角度$routeProvider 冲突),检查newUrl 是否具有requireAuth 属性并采取相应的行动

 angular.module('YourApp').controller('YourController', function ($scope, $location, session) 
     
     // intercept the route change event
     $scope.$on('$routeChangeStart', function (angularEvent, newUrl) 
         
         // check if the custom property exist
         if (newUrl.requireAuth && !session.user) 
             
             // user isn’t authenticated
             $location.path("/login");
         
     );
 );

【讨论】:

我们可以在一个地方为所有路由指定 'requireAuth:true' 属性吗?因为在我的场景中,它们不是登录页面,而是从第三方休息呼叫中获得身份验证。所以我想在一个地方指定,它也应该适用于未来添加的路线。 我不知道。或许您可以检查 每个 没有在 routes.js 中定义的特殊属性的路由。【参考方案4】:

几个月前我写了一篇关于如何使用 Angular 设置用户注册和登录功能的帖子,您可以在http://jasonwatmore.com/post/2015/03/10/AngularJS-User-Registration-and-Login-Example.aspx查看它

我检查用户是否登录$locationChangeStart 事件,这是我的主要 app.js 显示:

(function () 
    'use strict';
 
    angular
        .module('app', ['ngRoute', 'ngCookies'])
        .config(config)
        .run(run);
 
    config.$inject = ['$routeProvider', '$locationProvider'];
    function config($routeProvider, $locationProvider) 
        $routeProvider
            .when('/', 
                controller: 'HomeController',
                templateUrl: 'home/home.view.html',
                controllerAs: 'vm'
            )
 
            .when('/login', 
                controller: 'LoginController',
                templateUrl: 'login/login.view.html',
                controllerAs: 'vm'
            )
 
            .when('/register', 
                controller: 'RegisterController',
                templateUrl: 'register/register.view.html',
                controllerAs: 'vm'
            )
 
            .otherwise( redirectTo: '/login' );
    
 
    run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];
    function run($rootScope, $location, $cookieStore, $http) 
        // keep user logged in after page refresh
        $rootScope.globals = $cookieStore.get('globals') || ;
        if ($rootScope.globals.currentUser) 
            $http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
        
 
        $rootScope.$on('$locationChangeStart', function (event, next, current) 
            // redirect to login page if not logged in and trying to access a restricted page
            var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1;
            var loggedIn = $rootScope.globals.currentUser;
            if (restrictedPage && !loggedIn) 
                $location.path('/login');
            
        );
    
 
)();

【讨论】:

【参考方案5】:

我觉得这种方式最简单,但也许只是个人喜好。

当您指定您的登录路由(以及任何其他匿名路由;例如:/register、/logout、/refreshToken 等)时,添加:

allowAnonymous: true

所以,是这样的:

$stateProvider.state('login', 
    url: '/login',
    allowAnonymous: true, //if you move this, don't forget to update
                          //variable path in the force-page check.
    views: 
        root: 
            templateUrl: "app/auth/login/login.html",
            controller: 'LoginCtrl'
        
    
    //Any other config

您不需要在检查中指定“allowAnonymous: false”,如果不存在,则假定为 false。在大多数 URL 都经过强制身份验证的应用程序中,这项工作较少。更安全;如果您忘记将其添加到新 URL,则可能发生的最坏情况是匿名 URL 受到保护。如果您以另一种方式执行此操作,指定“requireAuthentication: true”,而您忘记将其添加到 URL,则您将敏感页面泄露给公众。

然后在您认为最适合您的代码设计的任何地方运行它。

//I put it right after the main app module config. I.e. This thing:
angular.module('app', [ /* your dependencies*/ ])
       .config(function (/* you injections */)  /* your config */ )

//Make sure there's no ';' ending the previous line. We're chaining. (or just use a variable)
//
//Then force the logon page
.run(function ($rootScope, $state, $location, User /* My custom session obj */) 
    $rootScope.$on('$stateChangeStart', function(event, newState) 
        if (!User.authenticated && newState.allowAnonymous != true) 
            //Don't use: $state.go('login');
            //Apparently you can't set the $state while in a $state event.
            //It doesn't work properly. So we use the other way.
            $location.path("/login");
        
    );
);

【讨论】:

【参考方案6】:

app.js

'use strict';
// Declare app level module which depends on filters, and services
var app= angular.module('myApp', ['ngRoute','angularUtils.directives.dirPagination','ngLoadingSpinner']);
app.config(['$routeProvider', function($routeProvider) 
  $routeProvider.when('/login', templateUrl: 'partials/login.html', controller: 'loginCtrl');
  $routeProvider.when('/home', templateUrl: 'partials/home.html', controller: 'homeCtrl');
  $routeProvider.when('/salesnew', templateUrl: 'partials/salesnew.html', controller: 'salesnewCtrl');
  $routeProvider.when('/salesview', templateUrl: 'partials/salesview.html', controller: 'salesviewCtrl');
  $routeProvider.when('/users', templateUrl: 'partials/users.html', controller: 'usersCtrl');
    $routeProvider.when('/forgot', templateUrl: 'partials/forgot.html', controller: 'forgotCtrl');


  $routeProvider.otherwise(redirectTo: '/login');


]);


app.run(function($rootScope, $location, loginService)
    var routespermission=['/home'];  //route that require login
    var salesnew=['/salesnew'];
    var salesview=['/salesview'];
    var users=['/users'];
    $rootScope.$on('$routeChangeStart', function()
        if( routespermission.indexOf($location.path()) !=-1
        || salesview.indexOf($location.path()) !=-1
        || salesnew.indexOf($location.path()) !=-1
        || users.indexOf($location.path()) !=-1)
        
            var connected=loginService.islogged();
            connected.then(function(msg)
                if(!msg.data)
                
                    $location.path('/login');
                

            );
        
    );
);

loginServices.js

'use strict';
app.factory('loginService',function($http, $location, sessionService)
    return
        login:function(data,scope)
            var $promise=$http.post('data/user.php',data); //send data to user.php
            $promise.then(function(msg)
                var uid=msg.data;
                if(uid)
                    scope.msgtxt='Correct information';
                    sessionService.set('uid',uid);
                    $location.path('/home');
                          
                else  
                    scope.msgtxt='incorrect information';
                    $location.path('/login');
                                  
            );
        ,
        logout:function()
            sessionService.destroy('uid');
            $location.path('/login');
        ,
        islogged:function()
            var $checkSessionServer=$http.post('data/check_session.php');
            return $checkSessionServer;
            /*
            if(sessionService.get('user')) return true;
            else return false;
            */
        
    

);

sessionServices.js

'use strict';

app.factory('sessionService', ['$http', function($http)
    return
        set:function(key,value)
            return sessionStorage.setItem(key,value);
        ,
        get:function(key)
            return sessionStorage.getItem(key);
        ,
        destroy:function(key)
            $http.post('data/destroy_session.php');
            return sessionStorage.removeItem(key);
        
    ;
])

loginCtrl.js

'use strict';

app.controller('loginCtrl', ['$scope','loginService', function ($scope,loginService) 
    $scope.msgtxt='';
    $scope.login=function(data)
        loginService.login(data,$scope); //call login service
    ;

]);

【讨论】:

【参考方案7】:

你可以使用resolve:

angular.module('app',[])
.config(function($routeProvider)

    $routeProvider
    .when('/', 
        templateUrl  : 'app/views/login.html',
        controller   : 'YourController',
        controllerAs : 'Your',
        resolve: 
            factory : checkLoginRedirect
        
    )

还有,resolve的功能:

function checkLoginRedirect($location)

    var user = firebase.auth().currentUser;

    if (user) 
        // User is signed in.
        if ($location.path() == "/")
            $location.path('dash'); 
        

        return true;
    else
        // No user is signed in.
        $location.path('/');
        return false;
       

Firebase 还有一种方法可以帮助您安装观察者,我建议将其安装在 .run 中:

.run(function()

    firebase.auth().onAuthStateChanged(function(user) 
        if (user) 
            console.log('User is signed in.');
         else 
            console.log('No user is signed in.');
        
    );
  

【讨论】:

【参考方案8】:

例如,一个应用程序有两个名为 ap 和 auc 的用户。我将一个额外的属性传递给每个路由,并根据我在 $routeChangeStart 中获得的数据处理路由。

试试这个:

angular.module("app").config(['$routeProvider',
function ($routeProvider) 

    $routeProvider.
            when('/ap', 
                templateUrl: 'template1.html',
                controller: 'template1',
                isAp: 'ap',
            ).
            when('/auc', 
                templateUrl: 'template2.html',
                controller: 'template2',
                isAp: 'common',
            ).
            when('/ic', 
                templateUrl: 'template3.html',
                controller: 'template3',
                isAp: 'auc',
            ).
            when('/mup', 
                templateUrl: 'template4.html',
                controller: 'template4',
                isAp: 'ap',
            ).

            when('/mnu', 
                templateUrl: 'template5.html',
                controller: 'template5',
                isAp: 'common',
            ).                               
            otherwise(
                redirectTo: '/ap',
            );
   ]);

app.js:

.run(['$rootScope', '$location', function ($rootScope, $location)                 
    $rootScope.$on("$routeChangeStart", function (event, next, current) 
        if (next.$$route.isAp != 'common') 
            if ($rootScope.userTypeGlobal == 1) 
                if (next.$$route.isAp != 'ap') 
                    $location.path("/ap");
                
            
            else 
                if (next.$$route.isAp != 'auc') 
                    $location.path("/auc");
                                        
            
        

    );
]);

【讨论】:

【参考方案9】:

所有人都提出了重要的解决方案,为什么您担心客户端的会话。 我的意思是当状态/网址发生变化时,我想你正在做一个 ajax 调用来加载模板的数据。

Note :- To Save user's data you may use `resolve` feature of `ui-router`.
 Check cookie if it exist load template , if even cookies doesn't exist than 
there is no chance of logged in , simply redirect to login template/page.

现在服务器使用任何 api 返回 ajax 数据。现在重点来了,根据用户的登录状态使用服务器返回标准返回类型。检查这些返回代码并在控制器中处理您的请求。 注意:- 对于本地不需要 ajax 调用的控制器,您可以像这样server.location/api/checkSession.php 向服务器调用空白请求,这是 checkSession.php

<?php/ANY_LANGUAGE
session_start();//You may use your language specific function if required
if(isset($_SESSION["logged_in"]))
set_header("200 OK");//this is not right syntax , it is just to hint

else
set_header("-1 NOT LOGGED_IN");//you may set any code but compare that same       
//code on client side to check if user is logged in or not.

//thanks.....

在控制器内部的客户端或通过其他答案中显示的任何服务

    $http.get(dataUrl)
    .success(function (data)
        $scope.templateData = data;
    )
    .error(function (error, status)
        $scope.data.error =  message: error, status: status;
        console.log($scope.data.error.status);
if(status == CODE_CONFIGURED_ON_SERVER_SIDE_FOR_NON_LOGGED_IN)
//redirect to login
  );

注意:- 我明天或将来会更新更多内容

【讨论】:

【参考方案10】:

您应该检查两个主要站点中的用户身份验证。

当用户改变状态时,使用'$routeChangeStart'回调检查它 当 $http 请求从 Angular 发送时,使用拦截器。

【讨论】:

AngularJS 基于路由动态加载控制器和模板

】AngularJS基于路由动态加载控制器和模板【英文标题】:AngularJSDynamicallyLoadControllerandTemplatebasedonRoute【发布时间】:2018-07-1702:44:23【问题描述】:我正在尝试根据路由(在Angular1.6中)动态加载模板和控制器,从当前目录架构中... 查看详情

AngularJS:在不完全重新加载控制器的情况下更改哈希和路由

】AngularJS:在不完全重新加载控制器的情况下更改哈希和路由【英文标题】:AngularJS:Changehashandroutewithoutcompletelyreloadingcontroller【发布时间】:2012-08-2008:43:49【问题描述】:我有一个控制器,其路由如下:#/articles/1234我想在不完... 查看详情

react怎样实现路由,类比angularjs中的实现路由控制的方法?

参考技术Areact实现路由可以直接使用react-router。ReactRouter是由RyanFlorence开发的应用于ReactJS的路由组件,它通过定义ReactJS组件<Routes>及相关子组件来实现页面路由的映射、参数的解析和传递。以下是例子:varReactRouter=require('... 查看详情

AngularJS 中的 SEO

】AngularJS中的SEO【英文标题】:SEOinAngularJS【发布时间】:2017-09-0619:07:01【问题描述】:我有一个网站,每个部分包含一个页面。也就是说,每个版块都有一个带有自己的元标记的页面。我如何使用AngularJS在一个页面中路由所有... 查看详情

另一个控制器中的AngularJS调用方法[重复]

】另一个控制器中的AngularJS调用方法[重复]【英文标题】:AngularJSInvokemethodinanothercontroller[duplicate]【发布时间】:2015-02-1919:46:33【问题描述】:为了简化它。我有3个带有项目列表的选项卡。(国家、城市、街道)。在我的应用中... 查看详情

AngularJS - 基于路由动态加载外部 JS

】AngularJS-基于路由动态加载外部JS【英文标题】:AngularJS-dynamicloadingofexternalJSbasedonroutes【发布时间】:2014-07-0214:26:26【问题描述】:我正在尝试制作一个简单的单页移动应用程序,它具有多个视图和一个下一步\\后退按钮来控制... 查看详情

AngularJS - 登录后路由到不同 ng-app 模块的另一个页面

】AngularJS-登录后路由到不同ng-app模块的另一个页面【英文标题】:AngularJS-Routetoanotherpageofdifferentng-appmoduleafterlogin【发布时间】:2014-01-2101:06:48【问题描述】:我只有AngularJS的基本知识。我已经创建了一个AngularJS应用程序。index.h... 查看详情

Angularjs 用户界面路由器。如何重定向到登录页面

】Angularjs用户界面路由器。如何重定向到登录页面【英文标题】:Angularjsui-router.Howtoredirecttologinpage【发布时间】:2015-01-2812:02:16【问题描述】:我有4个状态:dashboard、dahboard.main、dashboard.minor、login。仪表板是抽象的,它是.minor... 查看详情

angularjs中的factory,service与provider的区别

...什么不同,不要以为service每次注入controller都要new一次,AngularJS在初始化的时候,会new一次service,所以当controller要求注入service的时候,AngularJS就会把已经new过的的service给controller。注意:Provider都是singleton!!!!!没错,所以就算servic... 查看详情

Angular 和 NodeJS 中的路由问题 [angular]

...[angular]【发布时间】:2013-05-1423:26:11【问题描述】:我对Angularjs有疑问,我已经创建了login.html和home.html..成功登录后,我想将页面更改为home.html。我的路由不工作,默认url是localhost/angular我尝试路由local 查看详情

路由覆盖控制器路由

】路由覆盖控制器路由【英文标题】:routeoverridethecontrollerroutewith【发布时间】:2016-07-1211:10:21【问题描述】:所以我试图将变量传递给我的视图,但我不知道routes.php中的默认路由如何覆盖with变量..让我更具体在我看来,welcome... 查看详情

angularjs2

目录一、angularJS双向数据绑定1.数据模型变化同步到视图2.样式控制二、angularJS模块三、angularJS路由1.AJAX的缺陷2.路由的概念3.路由的使用4.路由规则 正文回到顶部一、angularJS双向数据绑定利用双向数据绑定,不仅能把数据模... 查看详情

angularjs中的控制器和作用域

欢迎大家指导与讨论:)  一、 作用域的事件传播    一.1修改的传播     关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的。简而言之,就是即时您... 查看详情

angularjs学习笔记--$http数据渲染到表格路由依赖注入provider

...ash;$http 可以从服务器中获取更大的数据集,这里使用angularjs的内置服务称为$http。使用angularjs的依赖注入为phoneList组件的控制器提供服务。  在我们的控制器中使用angularjs的$http服务,向我们的web服务器发出http请求,... 查看详情

如何为angularjs分离不同文件中的控制器?

】如何为angularjs分离不同文件中的控制器?【英文标题】:Howtoseparatecontrollersindifferentfilesforangularjs?【发布时间】:2015-09-1415:28:34【问题描述】:我有一个全局routes控制器,并想为每个页面模板创建一个额外的控制器。如下:vara... 查看详情

angular单页应用&angularjs内部实现原理

回顾自定义指令登录后获取登录信息session首先在登录验证的时候保存一个user在学生管理页面中运用ajax调用获取到登录的用户信息对注销按钮添加点击事件:调用ajax在表现层给user赋值为nullAngular实现单页应用angular中实现单页应... 查看详情

使用 AngularJS SPA 的服务器端路由

】使用AngularJSSPA的服务器端路由【英文标题】:Server-sideroutingwithanAngularJSSPA【发布时间】:2015-04-1810:54:10【问题描述】:我正在使用ASP.NETMVC、IIS8,并且我正在使用AngularJS创建一个SPA。我只在我的MVC应用程序中定义了这个路由规... 查看详情

AngularJS:从控制器内读取路由参数

】AngularJS:从控制器内读取路由参数【英文标题】:AngularJS:Readrouteparamfromwithincontroller【发布时间】:2013-04-2205:16:34【问题描述】:如何在AngularJS控制器中读取来自URL的参数?假设我有一个类似http://localhost/var/:value的URL,我希望... 查看详情