http://jsfiddle.net/4nil/puw6huv4/
Here,
I am trying to inject ngroute dependency
var sampleApp = angular.module("sampleApp", ["ngRoute"]);
and trying to use routeprovider as below
sampleApp.config(["$routeProvider",
function($routeProvider) {
$routeProvider.
when("/addRomCom", {
templateUrl: "add_book.html",
controller: "romcomctrl"
}).
when("/addHorror", {
templateUrl: "add_book.html",
controller: "horrorctrl"
}).
otherwise({
redirectTo: "/"
});
}]);
The same code works in a standalone application, i have only one html which has script tag which has the code.
The issue with your fiddle is the loading of your js. right now you are loading it in onLoad
Go to the javascript section settings and change the load type to : No Wrap in <body>
EDIT:
if you put it on load, the code would be local to the onLoad scope, and it would not be visible outside globally, so ng-app="myApp" would not be able to recognize the module because
var myApp = angular.module("myApp", [] ) ; lives only inside the onLoad function.
Related
I'm very new to Angular.js.
I've taken the necessary elements from this tutorial on modal windows within Angular.js: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
Isolated, I can get this code to work, but after porting it to my website, I just can't get it to work.
In Jason's code, he has a file called index.controller.js, and although I've ported this file to my own page, I don't believe it's firing. Here's index.controller.js:
(function () {
angular
.module('app')
.controller('Home.IndexController', Controller);
function Controller(ModalService) {
var vm = this;
vm.openModal = openModal;
vm.closeModal = closeModal;
function openModal(id){
ModalService.Open(id);
}
function closeModal(id){
ModalService.Close(id);
}
}
})();
On my own page, I have all the controllers contained within app.js. Here's how it's laid out:
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
})
...
});
You can see that, in the second .state, I'm attempting to call on the index.controller.js file for this particular partial. For some reason, though, the code under screeningsController (down below) is the code that's firing.
Further down in the same app.js file, I have my controllers:
...
app.controller('screeningsController', ['$scope', '$log', function($scope, $log){
$scope.popup = function() {
// assign a message to the $scope
$scope.message = 'Hello World!';
// use the $log service to output the message in a console
$log.log($scope.message);
};
}]);
...
Is there any way I can somehow integrate what's in the index.controller.js file into my screeningsController in the app.js? I've been trying to get a modal window working on my site for about a week now. Any help is much appreciated.
Start by creating a controller with identifier Home.IndexController. Based on the route configuration this will instantiate when you navigate to "/screenings". Call the popup() function attached to $scope of Home.IndexController via a directive us ng-click for testing. As you have specified controllerAs make sure to reference controller properties and methods prefixed with vm..
You do not need both index.controller.js and app.js both loaded. It looks everything you'd need is defined in app.js, so just make sure that is being loaded in your application. Eventually you'd want to separate these into different files and/or modules as necessary.
Try the following:
Configuration:
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
});
...
});
Home.IndexController:
app.controller('Home.IndexController', ['$log', function($log){
var vm = this;
vm.message = '';
vm.popup = function() {
vm.message = 'foobar';
$log.log(vm.message);
}
}]);
Screenings Template:
<!-- Home.IndexController /screenings template -->
<div>
<button type="button" ng-click="vm.popup()"></button>
</div>
This also assumes you have ui-view specified somewhere in your main template like index.html or equivalent:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body ng-app="app">
<div ui-view></div>
<!-- Vendor and Custom scripts added here -->
</body>
</html>
I want to get parameter from url in angularjs. for that i have did following.
1. in my app.js
var app = angular.module("testApp",
["ngRoute"]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/subscribe/:statusResponse', {
templateUrl: "client/subscription/statusResponse.html",
controller: "testController"
})
.otherwise({
redirectTo: "/"
});
// use the HTML5 History API
// $locationProvider.html5Mode(true);
}]);
2 in controller file:
app.controller("testController",['$routeParams',function($routeParams){
console.log($routeParams.statusResponse);}]);
in html file right now i have added simple text with define testApp.
The problem is that
when i hit url in browser
app.dev/demoapp/#/subscribe/test
it automatically grab
app.dev/demoapp/#/subscribe/:statusResponse
so what should be the problem i am not able to find that?
I am using two app modules in this app. Why do I get this error? I define the navCtrl in my index.html file where ng-view is like this:
<body ng-app="ciscoImaDashboardApp" ng-controller="navCtrl">
Error: [ng:areq] Argument 'navCtrl' is not a function, got undefined
What am I doing wrong? Am I getting this because I define angular.module in all my js files?
Routes JS:
angular.module('ciscoImaDashboardApp', ['ciscoImaDashboardAdmin', 'ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/admin', {
templateUrl: 'views/admin.html'
})
.when('/', {
templateUrl: 'views/welcome.html',
controller: 'welcomeCtrl'
})
.when('/overall-results', {
templateUrl: 'views/overall.html',
controller: 'overallCtrl'
})
.when('/swim-lane-results', {
templateUrl: 'views/swim-lane.html',
controller: 'swimlaneCtrl'
})
.when('/key-exemplifiers', {
templateUrl: 'views/key-exemplifiers.html',
controller: 'petalCtrl'
})
});
Second Module:
angular.module('ciscoImaDashboardAdmin',[])
.controller('minisCtrl', function ($scope) {
});
Nav JS:
angular.module('ciscoImaDashboardApp',['ciscoImaDashboardAdmin'])
.controller('navCtrl', function($scope, navService, $location, dummyData) {
});
right way :
angular.module('ciscoImaDashboarAdmin')
.controller('minisCtrl', function ($scope) {
});
remove dependency practice in the second time
from angular js documentation you can find below block check the link here
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
I am using templateUrl to display specific php pages in my webpage. Now I wish to scrap the individual php pages and display code with variables passed to it. What is the easiest way to get back to this?
var AppModule = angular.module('App', ['ngAnimate', 'ngRoute']);
AppModule.config(function($routeProvider) {
$routeProvider
.when('/page:pageNumber', {
templateUrl: function ($routeParams) {
return '/app/..../assets/html/page' + $routeParams.pageNumber + '.php';
},
controller: "PageCtrl"
})
.otherwise({
redirectTo: "/page1"
});
});
AppModule.controller("ViewCtrl", function($scope, $timeout) {
$scope.$on("$routeChangeSuccess", function(event, current, previous) {
...stuff...
});
});
Use scripts via text/ng-template, which allows you to write your templates inline while declaring a url to access them by. The following code can go directly in your index.html, and if your config is set to show '/my-template.html', the inline template will be output right in the ng-view above it.
<ng-view />
<script type="text/ng-template" id="/my-template.html">
template goes here
</script>
Then in your config:
.when('/', {
templateUrl: '/my-template.html'
});
Here's a little more info from the Angular docs:
https://docs.angularjs.org/api/ng/directive/script
And lastly, this technique is demonstrated in one of the TodoMVC examples for Angular:
View: https://github.com/tastejs/todomvc/blob/gh-pages/examples/angularjs/index.html
Config: https://github.com/tastejs/todomvc/blob/gh-pages/examples/angularjs/js/app.js
I am a newbie, trying to understand routing, I read the documentation and i injected ngRoute module, but still when i am trying to click on Employee Name its not showing any thing, i have wasted lot of time on this, but no luck. Can some one help.
No errors in the console.
Code:
Plunker
app.js
var app = angular.module('demoApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/employeedetail/:empid',
{
controller: 'empDetailController',
templateUrl: '/employeedetail.html'
})
.otherwise({ redirectTo: '/index.html' });
});
The $routeProvider have to be used in conjection with the ng-view directive.
In index.html, replace the employee list template with ng-view, and also remove the controller like this:
<body>
<h2>AngularJS Demo</h2>
<div ng-view></div>
</body>
Put the employee list template as a separate html file e.g. employeelist.html.
Then config the $routeProvider to render the employee list template and its controller by default:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'employeeController',
templateUrl: 'employeelist.html'
})
.when('/employeedetail/:empid', {
controller: 'empDetailController',
templateUrl: 'employeedetail.html'
})
.otherwise({
redirectTo: '/'
});
})
Example Plunker: http://plnkr.co/edit/mQIaJqZeOal77Z2RxG8z?p=preview
I think your problem come from the fact you don't use :
the ng-view attribute