I am writing a website and I need two AngularJs modules: ngRoute and ui.bootstrap.
Now, my script for ngRoute is
var ngRouteApp=angular.module('ngRouteApp',["ngRoute"]);
ngRouteApp.config(['$routeProvider', function($routeProvider){
$routeProvider
... some stuff here ...
}]);
while for bootstrap is
var bootstrapApp = angular.module('bootstrapApp', ['ui.bootstrap']);
bootstrapApp.controller('CarouselCtrl', CarouselCtrl);
function CarouselCtrl($scope){
...some stuff here...
};
Now I suppose I could combine the two
angular.module("allApps", ["ngRouteApp", "bootstrapApp"]);
and into the HTML I can write
<html ng-app="allApps">
but if I do, it doesn't work. I can't see anything.
Define an angular module with all the dependences you need.
var app = angular.module('allApps',['ngRoute', 'ui.bootstrap'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
... some stuff here ...
}]);
Then use var appto define controllers.
app.controller('CarouselCtrl', [ '$scope', function ($scope){
...some stuff here...
}]);
html
<html ng-app="allApps">
user3130401 is correct, thats the proper way to do it, however, you haven't included ngRoute in your html page. Running your plunkr the console prints:
Uncaught Error: [$injector:modulerr] Failed to instantiate module allApps due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available!
As soon as you add the ng-route code, it works fine.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
Here is your working example.
I separated the apps as you wanted using best practices.
As you will see i'm not using the appvariable as a don't consider it best practice. Whatever you place in a javascript file outside of an iffy function is made public. That's why i prefer to use iffy functions and place all angular definitions together at the end of the file.
Also note in index.html the order i place the scripts.
<script src="ngRouteApp.js"></script>
<script src="app.js"></script>
app.js
(function(angular) {
"use strict";
function carouselDemoCtrl($scope) {
var vm = $scope;
vm.myInterval = 3000;
vm.noWrapSlides = false;
vm.activeSlide = 0;
vm.slides = [{
image: 'http://lorempixel.com/400/200/'
}, {
image: 'http://lorempixel.com/400/200/food'
}, {
image: 'http://lorempixel.com/400/200/sports'
}, {
image: 'http://lorempixel.com/400/200/people'
}];
}
carouselDemoCtrl.$inject = ["$scope"];
angular
.module("allApps", ["ngRoute", "ui.bootstrap"])
.controller("carouselDemoCtrl", carouselDemoCtrl);
})(angular);
ngRouteApp.js
(function(angular) {
"use strict";
function configs($routeProvider) {
$routeProvider
.when('/', {
template: ''
})
.when('/gallery', {
templateUrl: 'pages/gallery.html'
})
.when('/actorBio', {
templateUrl: 'pages/actorBio.html'
})
.when('/contatti', {
templateUrl: 'pages/contatti'
})
.otherwise({
redirectTo: '/'
});
}
configs.$inject = ["$routeProvider"];
angular
.module("ngRouteApp", ["ngRoute"])
})(angular);
index.html
<!doctype html>
<html ng-app="allApps">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="ngRouteApp.js"></script>
<script src="app.js"></script>
</head>
<body>
<div>
Write your name here
<input type="text" ng-model="name"> Hi {{name}} Those are your photos:
<div ng-controller="carouselDemoCtrl" id="slides_control">
<div>
<uib-carousel active="active" interval="myInterval">
<uib-slide ng-repeat="slide in slides" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
</body>
</html>
Related
I am new to AngularJS so any tips will be welcome as I'm still trying to wrap my head around how everything works.
The following controller houses other controllers inside of it, however I've shortened the code to replicate my problem without the inner segments (I'll have more bugs once I add that in).
This is my html section:
<div ng-app="app">
<div class="ng-cloak" ng-controller="mainController">
<a ng-class="{active: ('sectionHome' | routeSegmentStartsWith)}" href="#{{'sectionHome' | routeSegmentUrl}}">Home</a>
<div id="content" style="">
<div app-view-segment="0"></div>
</div>
<div id=loading class=alert ng-show="loader.show">Loading...</div>
</div>
</div>
And the javascript:
var app = angular.module('app', ['ngRoute', 'ngAnimate', 'route-segment', 'view-segment']);
app.config(function($routeSegmentProvider, $routeProvider) {
$routeSegmentProvider.options.autoLoadTemplates = true;
$routeSegmentProvider
.when('/Home', 'sectionHome')
.segment('sectionHome', {
'default': true,
templateUrl: '../templates/sHome.html',
controller: 'mainController'})
$routeProvider.otherwise({redirectTo: '/Home'});
}) ;
app.value('loader', {show: false});
app.controller('mainController', function($scope, $routeSegment, loader) {
$scope.$routeSegment = $routeSegment;
$scope.loader = loader;
$scope.$on('routeSegmentChange', function() {
loader.show = false;
})
});
I'm either missing something conceptual or some other big thing, since when I inspect the link it appears that the scope bindings are not set in the html document and I remain with "ng-class="{active: ('sectionHome' | routeSegment...".
I've tried editing the code in jsFiddle (http://jsfiddle.net/3boccdu6/) however there I'm receiving an error
"..[$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it.."
This would make sense but I'm really not sure what I'm doing wrong, I've been following this working example:
http://angular-route-segment.com/src/example/#/section3
Adding the following to your html will resolve the issue.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-resource.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-route-segment/1.4.0/angular-route-segment.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.min.js">
</script>
<script src="app.js"></script>
I'm trying to build a simple AngularApp Here. I'm trying to add routeProvider and use config for the same. But the page never worked as expected. When I tried using fireBug in firefox, I found that the function present in the config, was never invoked. So, the code inside it remains untouched. (I was able to confirm that with breakpoints).
I believe that I'm missing something trivial here. Please help me figure it out.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/kscApp.js"></script>
</head>
<body>
<div ng-app="navbar">
<nav-bar></nav-bar>
</div>
<div ng-app="kscapp">
<ul>
<li> Home </li>
<li> Contact </li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
kscapp.js
//Define an angular module for our app
var sampleApp = angular.module('kscapp',[]);
//Define Routing for app
//STACKOVERFLOW: The function is not getting invoked here. Please feel free to use firebug to verify the same.
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}).
when('/Contact', {
templateUrl: 'templates/contact.html',
controller: 'ContactCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]);
sampleApp.controller('HomeCtrl', function($scope) {
console.log('inside Hc');
});
sampleApp.controller('ContactCtrl', function($scope) {
console.log('inside Cc');
});
navbar.js
var navBarModule = angular.module('navbar', []);
navBarModule.directive('navBar', function() {
return {
scope: {},
templateUrl: 'templates/navbar.html'
};
});
EDIT: I had two ng-app in the source. I removed the navBar, and now things start to work fine. Can someone explain to me why this behaviour is seen? Both modules are independent of each other.
You don't inject the ng route module.It should be
var sampleApp = angular.module('kscapp',['ngRoute']);
You are using different versions for Angular.min.js and Angular-route.min.js.
update your angular-route from 1.2.9 to 1.3.8
Also inject 'ngRoute' to kscapp module.
You can only use 'ng-app' once in your application.
Concider moving your ng-app="kscapp" up to the html tag, and update kscapp to:
var sampleApp = angular.module('kscapp',['ngRoute', 'navbar']);
For more on ngApp, read ngApp API.
I configured a small angular app in tomcat its working fine, but when i tried to use route-Provider its not working.
I cannot route to my views.
I did not know why ?
Can any one give some small example for that.
My Code files
//this is controllers.js
var myapp = angular.module('sampleapp', []);
myapp.config('$routeProvider',function myRoute($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/admin.html',
controller: 'adminController'
})
when('/showdata', {
templateUrl: 'partials/data-view.html',
controller: 'dataController'
}).
otherwise({
redirectTo: '/'
});
});
adminController = function ($scope) {
$scope.message = "Welcome to Login Page";
}
dataController = function ($scope) {
$scope.message = "Welcome to Show Data Page";
}
myapp.controller(controllers)
my index.html
<html>
<base href="/advangularjs/" />
<head>
<link type="text/css" rel="stylesheet" href="css/default.css">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="demoweb_angular/controllers.js"></script>
</head>
<body ng-app="sampleapp" style="background-color: #E0EEE0">
Login |
Show Data
<div ng-view align="center" style="border: 1px solid red;">
</div>
</body>
</html>
admin.html
<b>{{ message }}</b>
data-view.html
<b>{{ message }}</b>
Make sure you have added angular-route.js
in your index.html file.
Also Please go through the documentation of ui router for the basic setup
var myapp = angular.module('sampleapp', ['ngRoute']);
u need to add ngRoute dependancy also. Because your sampleapp is depend on ngRoute .
<div ng-view></div>
you need to add this also. the partial are loading to this div. put this inside the body.
I'm trying run AnugularJS within an MVC application. It seems logical to me that this could be done by creating small angular application that would run when an MVC Partial View is pushed to the client.
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<style>
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 600px;
height: 124px;
}
</style>
<div ng-app="app">
<div ng-controller="GridCtrl">
<table cellspacing="5" cellpadding="5">
<tr>
<td valign="top">
<div dropdownlist="" options="options" ng-model="selectedCategory"
on-change="onChangeCategoryList()"></div>
</td>
<td>
<div ng-show="contentAvailiable">
<div grid-angular=""></div>
</div>
</td>
</tr>
</table>
</div>
</div>
<script src="~/Scripts/Libraries/angular/angular.js"></script>
<script src="~/Scripts/Libraries/angular/angular-route.js"></script>
<script type="text/javascript" src="//rawgithub.com/angular-ui/ng-grid/v2.0.13/build/ng-grid.debug.js"></script>
<script src="~/app/app.js"></script>
<script src="~/app/controllers.js"></script>
<script src="~/app/directives.js"></script>
<script src="~/app/filters.js"></script>
<script src="~/app/services.js"></script>
angular.module('app', ['ui.router', 'app.filters', 'app.services', 'app.directives', 'app.controllers', 'ngGrid'])
.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/index',
controller: 'HomeCtrl'
})
.state('grid', {
url: '/grid',
templateUrl: 'views/grid',
controller: 'GridCtrl'
});
// $locationProvider.html5Mode(true);
}])
.run(['$templateCache', '$rootScope', '$state', '$stateParams', function ($templateCache, $rootScope, $state, $stateParams) {
var view = angular.element('#ui-view');
$templateCache.put(view.data('tmpl-url'), view.html());
// Allows to retrieve UI Router state information from inside templates
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess', function (event, toState) {
$rootScope.layout = toState.layout;
});
}]);
Instead of this working, I get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Any suggestions would be appreciated.
You need to make sure you load your Angular files before your ng-app directive.
Just put these files in your </head>:
<script src="~/Scripts/Libraries/angular/angular.js"></script>
<script src="~/Scripts/Libraries/angular/angular-route.js"></script>
<script type="text/javascript" src="//rawgithub.com/angular-ui/ng-grid/v2.0.13/build/ng-grid.debug.js"></script>
<script src="~/app/app.js"></script>
<script src="~/app/controllers.js"></script>
<script src="~/app/directives.js"></script>
<script src="~/app/filters.js"></script>
<script src="~/app/services.js"></script>
Yes
It is possible and very easy to use. Its just that you need to call the partial view using ng-include("'controller/action'"). Apostrophe(') is important while writing url.
Example
<div id="TestDiv" ng-include="templateUrl"></div>
and inside the angular controller
var app = angular.module("Layout", []);
app.controller("LoadPage", function ($scope, $http, $sce) {
//Initially
$scope.templateUrl = '/Home/DefaultPage';
// To dynamically change the URL.
$scope.NewProjFn = function () {
$scope.templateUrl = '/Home/ProjectPage';
};
});
ng-include fetches, compiles and includes an external HTML fragment. (Its all in one solution and for me best match for partial views)
I am new to AngularJs.
In app.js I have the following
angular.module('module1', ['module2'])
.config(function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'Controller1',
templateUrl: '/app/module/module1/partials/module1.html'
});
});
My module1 controller
angular.module('module1').controller('Controller1', function($scope) {
$scope.module1Name = "Module1";
});
In module2 folder I have Index.js
angular.module('module2', []).config(function($routeProvider) {
$routeProvider
.when('/test',
{
controller: 'Controller1',
templateUrl: '/app/module/module2/view/test.html'
});
});;
Module2 controller
angular.module('module2').controller('Controller1', function ($scope) {
$scope.module2Name = "Module2";
});
Here is my index.html
<html data-ng-app="module1">
<head>
<meta name="viewport" content="width=device-width" />
<title>Angular</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/App/app.js"></script>
<script src="~/App/module/module2/index.js"></script>
<script src="~/App/module/module2/controller/Controller1.js"></script>
<script src="~/App/module/module1/controller/Controller1.js"></script>
</head>
<body>
<div data-ng-view=""></div>
</body>
</html>
and module1.html
<div>
f4b view {{module1Name}}
<br/>
<a data-ng-href="#/test">Test page</a>
</div>
and test.html
<div>
Test view {{module2Name}} <br/>
<a data-ng-href="#/">f4b page</a>
</div>
when I start the application the module1 name is displayed but when I click the link all I see is "Test view" without module2
{{module2Name}} is not displayed...
Can someone tell me what am I doing wrong?
Thank you
Angular's $injector can't disambiguate between controllers that use the same name. One workaround is to manually namespace them:
angular.module('module1').controller('mod1.Controller1',
...
angular.module('module2').controller('mod2.Controller1',
jsfiddle
See also https://groups.google.com/d/topic/angular/SZMFAKfx1Q8/discussion