I did an login page redirect to home page and now I need to add menuBar to my home page
I followed this example
http://www.tutorialspoint.com/angular_material/angular_material_menubar.htm
when I tried to add the menuBar to my angularjs application I get an error
I saw many of same posts with same problem in internet but I couldn't find soluation to this error
my app.js
'use strict';
// declare modules
angular.module('Authentication', []);
angular.module('Home', []);
angular.module('menuBar',[]);
angular.module('BasicHttpAuthExample', [
'Authentication',
'Home',
'ngRoute',
'ngCookies'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'login'
})
.when('/', {
controller: 'HomeController',
templateUrl: 'home'
})
.otherwise({ redirectTo: '/login' });
}])
.run(['$rootScope', '$location', '$cookieStore', '$http',
function ($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
if ($location.path() !== '/login' && !$rootScope.globals.currentUser) {
$location.path('/login');
}
});
}]);
and my controller is here
'use strict';
angular.module('menuBar',
[ 'ngMaterial' ]).controller(
'menubarController',
function menubarController($scope, $mdDialog) {
this.sampleAction = function(name, ev) {
$mdDialog.show($mdDialog.alert().title(name).textContent(
'Start learning "' + name + '!').ok('OK').targetEvent(
ev));
};
});
and my view:
<div id="menubarContainer" ng-controller="menubarController"
layout="row" ng-cloak>
<md-toolbar class="md-menu-toolbar">
<div layout="row">
<div>
<md-menu-bar> <md-menu>
<button ng-click="$mdOpenMenu()">Tutorials</button>
<md-menu-content> <md-menu-item> <md-button
ng-click="ctrl.sampleAction('share', $event)">Share...</md-button>
</md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item> <md-menu>
<md-button ng-click="$mdOpenMenu()">Learn</md-button> <md-menu-content>
<md-menu-item> <md-button
ng-click="ctrl.sampleAction('HTML5', $event)">HTML5</md-button></md-menu-item> <md-menu-item>
<md-button ng-click="ctrl.sampleAction('jQuery', $event)">jQuery</md-button></md-menu-item>
<md-menu-item> <md-button
ng-click="ctrl.sampleAction('AngularJS', $event)">AngularJS
</md-button></md-menu-item> <md-menu-item> <md-button disabled="disabled"
ng-click="ctrl.sampleAction('AngularJS 2.0', $event)">AngularJS
2.0</md-button></md-menu-item> <md-menu-divider></md-menu-divider> <md-menu-item>
<md-button ng-click="ctrl.sampleAction('CSS', $event)">CSS</md-button></md-menu-item>
</md-menu-content> </md-menu> </md-menu-item> </md-menu-content> </md-menu> </md-menu-bar>
</div>
</div>
</md-toolbar>
</div>
and this is my index.jsp
<!DOCTYPE html>
<html ng-app="BasicHttpAuthExample">
<head>
<meta charset="utf-8" />
<title>Master Protection</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="jumbotron">
<div class="container">
<div class="col-xs-offset-2 col-xs-8">
<div ng-view></div>
</div>
</div>
</div>
<div class="credits text-center">
<p>
Master Protection Company
</p>
<p>
Eurnet.com
</p>
</div>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//code.angularjs.org/1.4.8/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.8/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.4.8/angular-aria.min.js"></script>
<script src="//code.angularjs.org/1.4.8/angular-messages.min.js"></script>
<script src="//code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="//code.angularjs.org/1.4.8/angular-cookies.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="js/app.js"></script>
<script src="js/modules/authentication/services.js"></script>
<script src="js/modules/authentication/controllers.js"></script>
<script src="js/modules/home/controllers.js"></script>
<script src="js/shared/menu/controllers.js"></script>
</body>
</html>
I found the problem
I forget to add my module ('menuBar') to the app
angular.module('mb', [
'Authentication',
'Home',
'ngRoute',
'ngCookies',
'menuBar'
])
Remove code 'angular.module('menuBar',[]);' from app.js.
Change the controller code to
angular.module('menuBar').controller(
'menubarController',
function menubarController($scope, $mdDialog) {
this.sampleAction = function(name, ev) {
$mdDialog.show($mdDialog.alert().title(name).textContent(
'Start learning "' + name + '!').ok('OK').targetEvent(
ev));
};
});
You inject dependency for your module inside the setter only.
When you create controllers, directives...etc you GET the module and there's no dependency there.
Related
I need help with routing in AngularJS. I am new and don't understend why it doesn't work.
I have a small application with to pages.
my app.js:
var app = angular.module("suggestionBox", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/suggestion/:id', {
controller: 'SuggestionController',
templateUrl: 'views/suggestion.html'
})
.otherwise({
redirectTo: '/'
});
});
my view:
<form ng-submit="addSuggestion()" style="margin-top: 50px">
<h3> Submit Your Suggestion </h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Great ideas here" ng-model="data.title">
</div>
<button type="submit" class="btn btn-primary">Suggest</button>
</form>
<div class="posts-wraper">
<div class="suggestion" ng-repeat="post in posts | orderBy: '-upvotes'">
<h3>{{ post.title }}</h3>
<div>
<p>
<span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)"></span> Upvotes: {{post.upvotes}}
</p>
<a class="comment" href="#/suggestion/{{$index}}">Comments</a>
</div>
</div>
</div>
main page:
<!DOCTYPE html>
<html>
<head>
<title>Suggestion Box</title>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="suggestionBox">
<div class="col-md-2"></div>
<div class="col-md-8">
<div ng-view></div>
</div>
<div class="col-md-2"></div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>
<script type="text/javascript" src="js/controllers/SuggestionController.js"></script>
<!-- Services -->
<script src="js/services/suggestions.js"></script>
</body>
</html>
And when I'm on home page and want to go to /suggestion/:id I click reference and nothing happen. But I have the following url: "http:// localhost:8080/#!/#suggestion%2F0" and stay at the home page. If I type url by hand like this: "http:// localhost:8080/#!/suggestion/0" all is well and I go to suggestion page. Then I press back:
Back
and it works! I am on home page, but url is: "http:// localhost:8080/#!/#%2F"
I don't know why! Please help me with it.
How about something like that check the Plunker if code snippet doesn't make any sense also pay attention to markup changes in the index, home and suggestion.html in plunker. You can edit the plunker and see the URL changes by launching the plunker preview in separate window.
app.js
var app = angular.module("SuggestionBox", ['ngRoute']);
app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider){
$locationProvider.hashPrefix(''); // magic line
$routeProvider
.when('/',{
controller: "HomeController",
templateUrl: "views/home.html"
})
.when('/suggestion/:id',{
controller: "SuggestionController",
templateUrl: "views/suggestion.html"
})
.otherwise({
redirectTo: '/'
});
}]);
I just want to pass a parameter to the next page (edit page) by clicking edit button. I tried the following code but it's not working. The URL just shown like below quote but the page shows blank and the controller is not loaded also. What is wrong here?
http://localhost:8080/#/group/edit?id=586351373b6bba91152ab744
View
<md-button class="md-raised md-primary" ng-click="doEdit(item._id)" title="Edit">Edit</md-button>
Route
$routeProvider.when('/group/edit', {
templateUrl: 'template/group_edit.html',
controller: 'GroupEditCtrl'
})
Controller
$scope.doEdit = function (id) {
$location.path('/group/edit').search({id: id});
}
Maybe some more code could be useful to understand what's going wrong, this simple snippet seems to do the job.
angular.module('BlankApp', ['ngMaterial', 'ngRoute']);
angular
.module('BlankApp')
.config(['$routeProvider', setupRoutes])
.controller('ListController', ['$scope', '$location', ListController])
.controller('GroupEditCtrl', ['$scope', '$location',GroupEditCtrl]);
function setupRoutes($routeProvider) {
$routeProvider.
when("/", { controller: "ListController", templateUrl: "list.html" });
$routeProvider.when('/group/edit', {
templateUrl: 'edit.html',
controller: 'GroupEditCtrl'
})
}
function ListController($scope, $location) {
$scope.item = {_id: 123}
$scope.doEdit = function (id) {
$location.path('/group/edit').search({id: id});
}
}
function GroupEditCtrl($scope, $location) {
$scope.locationParam = $location.search().id
$scope.goBack = function() {
$location.path('/');
}
}
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<ng-view></ng-view>
<script type="text/ng-template" id="list.html">
<md-button class="md-raised md-primary" ng-click="doEdit(item._id)" title="Edit">Edit</md-button>
</script>
<script type="text/ng-template" id="edit.html">
ehy edit! id: <pre>{{locationParam | json}}</pre> <br/>
<md-button class="md-raised md-primary" ng-click="goBack()" title="Back">Back</md-button>
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
</html>
Just wondering did AngularJS change the way they do menu items? reason I ask is their documentation says to use md-nav-click="goto('#report')" but when I do it does not run the script. see below for full script.
<md-nav-bar>
<md-nav-item>Home</md-nav-item>
<md-nav-item md-nav-click="goto('#report')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
Full script
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="IPETLOST" ng-cloak>
<!--
Your HTML content here
-->
<div layout="column" layout-fill>
<md-toolbar>
<div class="md-toolbar-tools" ng-controller="demoController">
<span ng-bind="data.sitename"></span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-nav-bar>
<md-nav-item>Home</md-nav-item>
<md-nav-item md-nav-click="goto('#report')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
</div>
</md-toolbar>
<md-content>
Hello!
<div data-ui-view=""></div>
<div data-ui-view="header"></div>
<div data-ui-view="left"></div>
<div data-ui-view="container"></div>
<div data-ui-view="footer"></div>
</md-content>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
var ipetApp = angular.module('IPETLOST', ['ngMaterial', 'ngMessages', 'ui.router']);
ipetApp.config(function ($locationProvider, $urlRouterProvider, $stateProvider) {
$urlRouterProvider.deferIntercept();
$urlRouterProvider.otherwise('/404');
$locationProvider.html5Mode({enabled: false});
$stateProviderRef = $stateProvider;
});
ipetApp.controller('demoController', function ($scope) {
$scope.data = {
sitename: "IPET Lost Pet's"
}});
ipetApp.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}])
ipetApp.run(['$q', '$rootScope','$http', '$urlRouter',
function ($q, $rootScope, $http, $urlRouter)
{
$http
.get("json.json")
.success(function(data)
{
angular.forEach(data, function (value, key)
{
var state = {
"url": value.url,
"parent" : value.parent,
"abstract": value.abstract,
"views": {}
};
angular.forEach(value.views, function (view)
{
state.views[view.name] = {
templateUrl : view.templateUrl,
};
});
$stateProviderRef.state(value.name, state);
});
// Configures $urlRouter's listener *after* your custom listener
$urlRouter.sync();
$urlRouter.listen();
});
}]);
</script>
</body>
</html>
http://codepen.io/russellharrower/pen/YWZmre
md-nav-bar and md-nav-item failed for me with 1.1.0-rc2 version of angular-material.min.css and angular-material.min.js when working with angular js version 1.5.5,
try 1.1.0-rc.5 version of angular-material.min.css and angular-material.min.js
update package.json from "angular-material": "git+https://github.com/angular/bower-material.git#master" to "angular-material": "^1.1.0-rc.5" as needed
I have been attempting to get angular routing working and everytime I create a new project and It does not work. I have had it working in some projects but I can never see why my newly created project does not work.
Its probably something obvious, thanks for any help in advance.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Styles.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</head>
<body>
<a href="#/">
<button class="btn btn-danger">Homepage</button></a>
<a href="#/about">
<button class="btn btn-success">About</button></a>
<a href="#/date">
<button class="btn btn-warning">Date</button></a>
<div class="row">
<div ng-view>
</div>
</div>
<script src="SinglePageApp/app.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
app.js file
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
Try this plunker:
http://embed.plnkr.co/L6E4GCe3O0Jh1vqKyGFD/
I've used the example at the angularJS documentation to create your usecase.
You should change the template filepaths, with your own. I also haven't included bootstrap.
If you want to use buttons, then you can use this example in plunkr based on this answer by Josh David Miller(upvote him if you use his directive). Directives are a way to customize html, and here we're using one as an html attribute (you can also use them as standalone elements) to create a hyperlink button.
Here's fiddle for you that works as expected
Not sure why your code is not working, angular has pretty bad debugging tool.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<div>
<a href="#/">
<button class="btn btn-danger">Homepage</button>
</a>
<a href="#/about">
<button class="btn btn-success">About</button>
</a>
<a href="#/date">
<button class="btn btn-warning">Date</button>
</a>
<div class="row">
<div ng-view></div>
</div>
</div>
<script type="text/ng-template" id="pages/homepage.html">
{{homepage}}
</script>
<script type="text/ng-template" id="pages/about.html">
{{about}}
</script>
<script type="text/ng-template" id="pages/date.html">
{{dateNow}}
</script>
Script file looks like this
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
})
.otherwise({redirectTo:'/'});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
angular.bootstrap(document.body, ['app']);
I'm trying to implement a modal from angular ui bootstrap. After I implemented it on my web application, I got an unexpected behavior which is the modal does show up after I clicked the text, but what shows up is not the path that I wanted but rather the navbar of the web app.
Here's the code
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<base href='/'>
<!-- load bootstrap from CDN and custom CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<header>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-book"></span>Testing App
</div>
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
<li>Write</li>
</ul>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
angular.module('MyApp', ['ngRoute', 'ui.bootstrap'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
});
$locationProvider.html5Mode(true);
});
controller.js
angular.module('MyApp')
.controller('HomeController', function($scope, $location) {
$scope.data = "Hello Angular";
})
.controller('ModalController', function($scope, $location, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: function() {
},
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
home.html
<div class="container">
<h1>Awesome {{ data }}</h1>
</div>
modal.html (The path that the modal suppose to show);
<h1>Need to show this actually</h1>
The picture, what shows up after i clicked the text that trigger the modal event
Added this:
<script type="text/ng-template" id="modal.html">
<h1>Need to show this actually</h1>
</script>
right after
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
and it works in plunker:
http://plnkr.co/edit/bPuemujbTiX7U8AnY607?p=preview