我正在尝试使用AngularJS 的ng-click功能来切换视图.我将如何使用下面的代码执行此操作？
的index.html
<div ng-controller="Cntrl">
<div ng-click="someFunction()">
click me
<div>
<div>
controller.js
function Cntrl ($scope) {
$scope.someFunction = function(){
//code to change view?
}
}
目前我们的项目使用默认$routeProvider,我正在使用这个"hack",url无需重新加载页面即可进行更改:
services.service('$locationEx', ['$location', '$route', '$rootScope', function($location, $route, $rootScope) {
$location.skipReload = function () {
var lastRoute = $route.current;
var un = $rootScope.$on('$locationChangeSuccess', function () {
$route.current = lastRoute;
un();
});
return $location;
};
return $location;
}]);
并在 controller
$locationEx.skipReload().path("/category/" + $scope.model.id).replace();
我想到的替换routeProvider用ui-router筑巢路线,但无法找到这ui-router.
是否有可能 - 做同样的事情angular-ui-router？
我为什么需要这个？让我用一个例子说明:
用于创建新类是路线/category/new
后clicking在SAVE我秀success-alert,我想改变路线/category/new,以/caterogy/23(23 -是存储在数据库新项目的ID)
下面是我的app.js文件
angular
.module('repoApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap',
'ui.router'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/login', {
templateUrl: 'views/loginPage.html',
controller: 'loginCtrl'
})
.otherwise({
redirectTo: '/'
});
});
angular
.module('loginState',['ui.router']);
以下是我的州档案
angular
.module('repoApp')
.config(function ($stateProvider) {
$stateProvider.state('home1', {
url:'/home1',
templateUrl: 'views/modals/test.html'
})
.state('secondState',{
url:'/secondState',
templateUrl: 'views/modals/secondStateTest.html'
});
});
问题是,使用我的html导航到登录页面.
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home</a></li>
<li><a ng-href="#/about">About</a></li>
<li><a ng-href="#/">Contact</a></li>
<li class="loginShift"><a ng-href="#/login">Login</a></li>
</ul> …我有几个不同的路由,但包含类似的参数.
例:
when '/user/:accountId/charts/:chartType', controller:ChartsController
when '/manager/:accountId/charts/:chartType', controller:ChartsController
when '/whatever/pathy/paththingy/charts/:chartType', controller:ChartsController
请注意,所有三个视图都使用相同的图表控制器来控制视图.它是一个相当通用的控制器,但它需要在可用的图表类型之间切换...同时保持其余的路线.
示例:(这不起作用)
if my currrent url is '/user/001/charts/comparison'
Then I call something like:
$route.current.params.chartType = 'newChart';
$route.reload(); // or soemthing similar?
I want the url to become '/user/001/charts/newChart'
有没有人知道如何在不完全重新键入或重建路径路径的情况下轻松更新路径参数？
我正在使用$ location.path()在我的角度网站中加载新视图.我的页面看起来像:
<html>
<head>
</head>
<body>
<div data-ng-view="" ></div>
</body>
</html>
我根据需求(索引,主页,登录等)更改ng-view.有时导航似乎很慢(页面内有一些小故障,而0.1秒)是否有办法让导航瞬间完成？
此外,我尝试了ng-animate,改善了这种感觉,但并不完全.我想预加载我的"观点"将是一个解决方案..
编辑:
通过添加:改善感觉:
myApp.run(function ($templateCache, $http) {
$http.get('Template1.html', { cache: $templateCache });
});
我的应用程序中有AngularJs ui路由器.我需要根据我的状态加载js文件.
.state('root.home',{
url: '/index.html',
views: {
'header': {
templateUrl: 'modules/header/html/header.html',
controller: 'headerController'
},
'content-area': {
templateUrl: 'modules/home/html/home.html',
controller: 'homeController'
},
'footer': {
templateUrl: 'modules/common/html/footer.html',
controller: 'footerController'
}
},
data: {
displayName: 'Home',
}
})
headerController,homeController和footerController在加载home状态时有不同的js文件我们需要加载控制器js文件是否可以通过UI路由器？
我正在开始一个新的角度项目(单页面应用程序),它将具有复杂的视图(对话框,向导,弹出窗口,加载器),但目前还没有明确的要求.
我应该提前使用ui.router吗？或者我应该从ngRoute开始并在需要时更改为ui.router？
ui.router对ngRoute的好处是什么？有什么限制可以让我选择ui.router？
根据我的研究,似乎ui.router比ngRoute做得更多,我会尽量避免复杂性.
我读过angular-route和angular-ui-router之间有什么区别？,但并没有真正帮助(我是一个完全角的菜鸟).
我在js,jquery,html方面有很好的技巧.
我在Angular JS中使用routeProvider:
.when('/profile/personal', {
templateUrl: 'personal.html',
controller: 'EditProfileController'
})
我如何将param传递给控制器EditProfileController,这里调用返回数据的Ajax方法.此数据必须显示在路径模板中personal.html.
例:
.controller('EditProfileController', ['$scope', '$http', function ($scope, $http) {
// If was click on `/profile/personal` from route, must get patam `personal` and call method GetAjax(param);
$scope.GetAjax = function (param){
//here return data put it in template HTML from route
}
}]);
我的链接位于页面路径中:
http://wd.tk/profile
当我点击链接路线时,我得到了URL:
http://wd.tk/profile#/profile/personal/1
我会做:
.controller('EditProfileController', ['$scope', '$http', function ($scope, $http, $routeParams) {
console.log($routeParams);
}]);
我收到错误:
TypeError: Cannot read property 'idProfile' of undefined
对于大型项目,ui-router是首选.但它给出的主要优点是嵌套视图.但这也可以通过ng-view实现.那么选择哪一个？
var faraWorkspaceApp = angular.module("FaraWorkspace", ['ngRoute', 'ui.router']);
之间有什么不同ngRoute,并ui.router在angularjs？