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>
Related
I am developing a single page web application using AngularJS' ng-view and ng-template directives. But when I run it my browser show this type [1]: http://i.stack.imgur.com/TPuPo.png of error.
Here is my script block with main module and routing configuration.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS - Views</title>
<!--AngularJs Library-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2 style="text-align: center;">Simple Application using AngularJS - Views</h2><hr><br>
<!--Start AngularJS App-->
<div ng-app="myApp">
<p>Add Student</p>
<p>View Students</p>
<div ng-view></div>
<!--Script for Add Student-->
<script type="text/ng-template" id="addStudent.htm">
<h2>This is the view of Add Student</h2>
{{message}}
</script>
<!--Script for View Students-->
<script type="text/ng-template" id="viewStudent.htm">
<h2>This is the view of all students</h2>
{{message}}
</script>
</div>
<!--End AngularJS App-->
<!--App Necessary Scripts-->
<script>
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['routeProvider',function ($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
}).
when('/viewStudent', {
templateUrl: 'viewStudent.htm',
controller: 'ViewStudentController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]);
myApp.controller('AddStudentController', function ($scope) {
$scope.message = "This page will be used to display add student form!!";
});
myApp.controller('ViewStudentController', function($scope){
$scope.message = "This page will be used to display all students!!";
});
</script>
</body>
</html>
what can I do to fix it?
Here's your working code. Also here's a CodePen example, I reorganize the code to make it more comfortable, please review it, study it and compare it for learning purpose. http://codepen.io/alex06/pen/rrzRbE?editors=1010
<html ng-app="mainApp">
<head>
<title>Angular JS Views</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div>
<p>Add Student</p>
<p>View Students</p>
<div ng-view></div>
</div>
<script type = "text/ng-template" id = "addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type = "text/ng-template" id = "viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
<script>
(function(){
'use strict'
angular
.module('mainApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
})
.otherwise({
redirectTo: '/addStudent'
});
}])
.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
})
.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
})();
</script>
</body>
</html>
Just change the following line:
myApp.config(['routeProvider',function ($routeProvider) {
To
myApp.config(['$routeProvider',function ($routeProvider) {
I think this is what you missed.
Define config as this:--
myApp.config(function ($routeProvider) { $routeProvider
Rather than:-- myApp.config(['routeProvider',function ($routeProvider) {
$routeProvider.
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 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.
I have two views: a start page and a details page.
The start page is long and I want the user to get back to it's last position when it goes back from a details page.
If the user hits the back button it does exactly that but if I link it with ui-sref or an a tag to start it will always go to the top of page.
Is it possible to have the back button functionality in all cases?
<a ui-sref="start">Back</a> - (goes to top)
Back - (wanted behaviour)
I created a quick Plunker to illustrate my example.
http://plnkr.co/edit/z8kdD7ONkL4bML4IaFNz?p=preview
Please click the Launch in a separate window button to get the expected behaviour.
Here's what I came up with. When navigating back from the detail view to the list view, pass the ID of the item that was being shown. Then scroll that item in the list back into view.
http://plnkr.co/edit/tWv4UNbBdSbes3XKEcYw?p=preview
html:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<title>ui router test</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div ui-view class="main-view"></div>
<script id="templates/start.html" type="text/ng-template">
<p>Return to {{value}}</p>
<div class="start">
<div ng-repeat="i in getNumber(30) track by $index" class="box" id="item_{{$index}}" ui-sref="detail({id:$index})">
{{$index}}
</div>
</div>
</script>
<script id="templates/detail.html" type="text/ng-template">
<div class="detail">
Page: {{id}} <br><br>
<button ui-sref="start({id:id})">Start by sref</button>
<button ng-click="goBack()">Back by history</button>
Link
</div>
</script>
<script type="text/javascript" src="http://code.angularjs.org/1.3.14/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.14/angular-animate.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.14/angular-touch.js"></script>
<script type="text/javascript" src="https://cdn.cdnhttps.com/cdn-libraries/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script type="text/javascript" src="ui-router-extras.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
js:
var app = angular.module('myApp', ['ngAnimate', 'ui.router', 'ct.ui.router.extras.dsr']);
app.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('start', {
url: "/?id",
templateUrl: "templates/start.html",
controller: 'StartCtrl',
deepStateRedirect: true
})
.state('detail', {
url: "/detail/:id",
templateUrl: "templates/detail.html",
controller: 'DetailCtrl',
deepStateRedirect: true
})
});
app.controller('StartCtrl', function($scope, $stateParams, $location, $anchorScroll) {
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.value = $stateParams.id;
if($scope.value) {
$location.hash("item_" + $scope.value);
$anchorScroll();
}
});
app.controller('DetailCtrl', function($scope, $stateParams) {
$scope.id = $stateParams.id;
$scope.goBack = function() {
window.history.back();
};
});
I started learning AngularJS so I created two html pages:
index.html
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/app.js"></script>
<title>Angular Tutorial</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
and list.html
<input type="text" ng-model="test">
<h1>Hello: {{test}}</h1>
The app.js looks like this
var TodoApp = angular.module("TodoApp", ["ngResource"]).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: "list.html" }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location)
{
$scope.test = "testing";
};
Unfortunately, when I open the index.html page it is blank. What can be the cause of the problem?
As you mentioned the error:-
1) Add angular-route.js file in main page.
2) Add 'ngRoute' dependency in angular main app.
Doc:-https://docs.angularjs.org/tutorial/step_07
also you need to mention the controller in your HTML with ng-controller="ListCtrl" to initialize it.
And do not declare your controller that way, you must do
todoApp.controller('ListCtrl', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
$scope.test = "testing";
}]);
It seems that you are missing the controller's definition:
TodoApp.controller('ListCtrl', ListCtrl);
This should fix your issue
You can also take a look at yeoman. It will help you to start with angularjs in zero time.
http://yeoman.io/codelab.html