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]) ;
的な感じ。