html5モードが有効な時にリロードしたかったり、angularのroutingから抜け出したい場合。
aタグのtarget属性に_selfを指定してやればおk。
<a href="/index" target="_self">link</a>
html5モードが有効な時にリロードしたかったり、angularのroutingから抜け出したい場合。
aタグのtarget属性に_selfを指定してやればおk。
<a href="/index" target="_self">link</a>
まずはui-router本体を読み込む
angular.module('app', [
'ui.router',
]);
configメソッドでこんな感じで設定
angular
.module('app')
.config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
function($urlRouterProvider, $stateProvider, $locationProvider) {
$stateProvider
/**
* index
*/
.state('index', {
url: '/',
views: {
main: {
templateUrl: '/index.html',
controller: 'indexController',
controllerAs: 'index'
}
}
})
/**
* blog
*/
.state('blog', {
url: '/blog',
views: {
main: {
templateUrl: '/blog.html',
controller: 'blogController',
controllerAs: 'blog'
}
}
})
;
// ルーティングが一致しなかった場合のデフォルト設定はこうする。
$urlRouterProvider.otherwise('/');
// html5モードを有効に
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
あとルーティングを入れ子にできたりもするけどそれはまた今度。
テキストの中にリンクがあったら自動的にリンクになるやつ。
※同一URLがテキスト内に複数個あっても大丈夫なように修正
.filter('parseUrl', function($sce) {
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
return function(text, enable, target, style) {
if (!!+enable) {
target = target || '_blank';
style = style || null;
text = text.replace(exp,'<a target="' + target + '" style="' + style + '"href="$1">$1</a>');
return $sce.trustAsHtml(text);
}
return text;
};
});
メモ。
■jsonエンコード
angular.toJson(obj, [pretty]);
■jsonデコード
angular.fromJson(json);
下記URLのstackさんを参考にやってみた。っていってもほぼそのまんまだけど。
■constants.js(ログインが必要なページ(URI)をここで定義しておく)
app.constant('requireAuth', [
'/admin/dashboard'
]);
■app.js
app.run(['$rootScope', '$location', 'auth', 'requireAuth',
function($rootScope, $location, auth, requireAuth) {
// login check
$rootScope.$on('$routeChangeStart', function(event) {
if (requireAuth.indexOf($location.path()) > -1 && !auth.isLoggedIn()) {
// ログインページに飛ばす
event.preventDefault();
$location.path('/login');
}
});
}]);
■factories.js
app.factory('auth', function(){
var user;
return {
setUser: function(aUser) {
user = aUser;
},
isLoggedIn: function() {
return (user) ? user : false;
}
}
});
■controllers.js(ログインが必要なコントローラーにて)
var controller = function($scope, $location, auth) {
$scope.$watch(auth.isLoggedIn, function(value, oldValue) {
if (!value && oldValue) {
// ログインページに飛ばす
$location.path('/login');
}
}, true);
}
こんな感じでなかなかよさ気に実装することが出来た。
ただしこのままだとページをリロードするとログアウトしてしまうため、そこは$cookieなどをうまく利用してログイン状態を維持しておくのがベター。
メモ。
CSSとJSを読み込む。
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" /> <link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" /> <link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css" /> <link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css" /> <script src="//cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script> <script src="/angular-kendo.js"></script>
モジュールを読み込む。
angular.module('app', [
'kendo.directives',
]);
あとは公式のDEMOでも見て好きに使えばおk。
http://demos.telerik.com/kendo-ui/
modalInstanceを生成する際に下記のようにする。
var indexController = function($modal) {
var that = this;
this.data = {};
this.open = function() {
var modalInstance = $modal.open({
templateUrl: 'confirm.html',
controller: 'confirmController as confirmController',
resolve: {
data: function() {
return that.data;
}
}
});
modalInstance.result.then(function(rtValue) {
// ok function
}, function() {
// dismiss function
});
};
}
var confirmController = function($modalInstance, data) {
var that = this;
this.data = data;
this.ok = function() {
};
this.cancel = function() {
};
};
angular
.module('controllers')
.controller('indexController', ['$modal', indexController])
.controller('confirmController', ['$modalInstance', 'data', confirmController])
;
的な感じ。