I'm trying to embed angularjs into my existing asp.net mvc4 app.
(Views/Shared/)
_Layout.cshtml
<html data-ng-app="myApp">
<head>
<script src="~/Scripts/angular.min.js"></script>
<script src="/js/main.js"></script>
</head>
<body>
#RenderBody()
</body>
</html>
/js/main.js
var app = angular.module("myApp", []);
module.config(function ($routeProvider) {
$routeProvider.when("/topics", {
controller: "topicsController",
templateUrl: "/js/templates/topicsView.html"
});
$routeProvider.otherwise({ redirectTo: "/" });
});
app.controller("topicsController", function ($scope) {
$scope.testData = "some dummy data";
});
/js/templates/topicsView.html
<h1>topics template view, dummy object </h1>
{{ testData }}
and inside /Views/Home/Index.cshtml
<div data-ng-view=""></div>
I'm trying to navigate to /topics using #/topics url but nothing is rendered (blank page, not 404), not even h1 title from templates/topicsView.html
What I'm doing wrong?
You forgot to include ngRoute module. Try this:
var app = angular.module("myApp", ['ngRoute']);
You need to include angular-routes.js along with angular.js and then include ngRoutes modules as a dependency when you create the angular main app module.
Related
I can't understand why the text I type in my controller is not linking to the view.
I created two javascript files. app.js and MainController.js
I followed a tutorial from Codecademy to replicate a similar scenario but I'm probably missing something very rudimentary which I can't figure out for some reason.
Below are my files:
index.html
<!DOCTYPE html>
<html lang="en">
<body ng-app="myApp" ng-controller="MainController">
<h1>{{title}}</h1>
<scipt src="js/app.js"></scipt>
<script src="js/controller/MainController.js"></script>
</body>
</html>
app.js
var app = angular.module('myApp', []);
MainController.js
app.controller('MainController', ['$scope', function ($scope) {
$scope.title = 'Hola!';
}]);
I think it could be to do with having my Main Controller in a separate file to the app.js file.
I think that you're not loading Angular in your main page (index.html), so just add this line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
you need to declare the app variable before referencing it in MainController.js
// MainController.js
var app = angular.module('myApp');
In mainController
angular.module('myApp').controller(......
You need to add Angular.js to you head.. Before you app.js I think angular is not loaded now.
index.html
<head>
<title>{{title}}</title>
<script data-require="angular.js#1.5.0-rc.0" data-semver="1.5.0-rc.0" src="https://code.angularjs.org/1.5.0- rc.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body >
<h1>{{title}}</h1>
{{1+1}}
</body>
</html>
app.js
(function() {
angular.module('myApp', [])
.controller('mainController', ['$scope', function($scope) {
$scope.title = 'Hello world!';
}]);
}())
NOTE: Do not declare a variable app as this is on global scope. which can be overwritten by something else always try to use a IFFE
and add your controllers to your module and create other modules if you want to put services inside another file.
I'm new to angularjs/js and trying to follow an example in introduction video, but in spite of copying the example, I get errors that does not appear in demonstration video.
The error I get is 'unknown provider routeProvider'.
Can someone explain why I get the error -- and not least how I resolve it?
thanks,
Anders
<!DOCTYPE html>
<html data-ng-app="app">
<head>
<title></title>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script >
var app = angular.module("app", []);
app.config(function ($routeProvider) {
});
</script>
</head>
<body>
</body>
</html>
https://www.youtube.com/watch?v=8ILQOFAgaXE
you should add this to the app dependencies:
var app = angular.module("app", ['ngRoute']);
ngRoute is a separate module which contains $routeProvider
The youtube video is referring to a version of angular prior to 1.2 where when ngRoute was present, it was merged with angular itself
angular route has been moved to a seperate module and you need to download, include angular-route.js in your html file. download the angular-route.js file from here --> https://github.com/angular/bower-angular-route.
and change this line var app = angular.module("app", []);
to var app = angular.module("app", ['ngRoute']);
Found solution to this question.
I have a normal javascript app.I want to embed my angularjs app into it by bootstrapping manually.The problem is that "controllers with that module is not at all initialized"
index.html:
<html>
<head> <title>Including angular app into another</title> </head>
<body>
//I have normal javascript app
<div>First App</div>
<div id="secondApp">
<div class="container" ng-include="'views/main.html'" ng-controller="MainCtrl"> </div>
</div>
//included all libraries required for the app
<script src="jquery.js"></script>
<script src="angular.js"></script>
//main.js
<script src="scripts.js"></script>
</body>
</html>
scripts.js:
angular.module('sampleApp', []);
// in this way, i have bootstrapped the app
angular.bootstrap(document.getElementById('secondApp'), ['sampleApp']);
angular.module('sampleApp')
.controller('MainCtrl', function($scope, $rootScope, $timeout) {
//i have included the functionality required for my second app
});
But it is not embedding angular app into first app, getting an error "Argument 'MainCtrl' is not a function, got undefined"
I don't understand, where i am doing wrong.
Just bootstrap the whole app in index.html instead of doing this in scripts.js like this
<script type="text/javascript">
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('secondApp'), ['assetWidgetApp']);
});
</script>
Thanks!!!
The order of the statements is wrong. It should be:
angular.module('sampleApp', []);
angular.module('sampleApp')
.controller('MainCtrl', function($scope, $rootScope, $timeout) {
//i have included the functionality required for my second app
});
// in this way, i have bootstrapped the app
angular.bootstrap(document.getElementById('secondApp'), ['sampleApp']);
You need to define the controller before you bootstrap the angular app.
I'm trying to build an angularjs application. Everything seems fine, there is no error, but it's not working. To remove other factors, I removed everything (requirejs etc.) and dumbed it down to a small html file.
Here is the js code in html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script>
angular.module('application', ['ngRoute']);
angular.module('application').config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {template: 'test content', controller: 'controller1'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
angular.module('application').controller('controller1', ['$scope', function($scope) {
console.log('in controller1');
}]);
angular.bootstrap(document, ['application']);
</script>
</head>
<body>
</body>
</html>
Result I'm expecting to see is "test content" on page, and 'in controller1' in my console.
Can you tell me why it's not working?
Your are missing the ng-view directive that works together with the routes to display the template provided in the route config.
Working plunker
Code:
<body>
<div ng-view></div>
<script>
angular.module('app', [])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {template: '<p>test content</p>', controller: 'controller1'});
$routeProvider.otherwise({redirectTo: '/'});
}])
.controller('controller1', ['$scope', function($scope) {
console.log('in controller1');
}]);
angular.bootstrap(document, ['app']);
</script>
</body>
Angular JS bootstraps by using ng-app and ng-controller directive declared in html.
Refer this:
http://docs.deployd.com/docs/collections/examples/a-simple-todo-app-with-angular.md
Try adding adding this document ready test around you bootstrap call. It'll wait to call bootstrap until the document (DOM) is completely ready.
If you don't wrap bootstrap in the ready() call the browser may still be in the middle of constructing the DOM when angular builds it's view of the DOM. This can lead to angular being unaware of parts of your page, or worse (and this can be tough to debug).
angular.element(document).ready(function() {
angular.bootstrap(document, ['application']);
};
You can read more about that in this guide to angular initialization: http://docs-angularjs-org-dev.appspot.com/guide/bootstrap
Or you could use <html ng-app='application'> instead as others have mentioned if you want to go the more traditional route- but then you'd have to get rid of the angular.bootstrap call.
I am trying to have each item in a list have a button that uses $routeProvider to route to a template. However, I keep getting 404s when I hit the link (it goes to the right address, but no page loads). Any help on getting this code to work would be most appreciated:
angular.module('tipOutput', ['firebase', 'filters'])
.controller('Tips', ['$scope', 'angularFire',
function ($scope, angularFire) {
var ref = new Firebase('https://sitename.firebaseio.com/tips');
angularFire(ref, $scope, "tips");
}])
//routing to secondary pages
.config(['$routeProvider', function($routeProvider, $locationProvider) {
$routeProvider.
when('/tips/:tipId', {template: 'partials/tip-detail.html', controller: 'Tips'}).
otherwise({redirectTo: '/'});
}])
And, in case it helps, here's the code of my template:
<html ng-app="TipOutput">
<body>
<div ng-view></div>
<script type="text/javascript" src="http://static.firebase.com/v0/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js"></script>
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase-simple-login.js'></script>
<script src="js/app.js"></script>
</body>
</html>
Routes in a single page app are really virtual routes. How does the webserver software know what to do with that url? What are you doing to map this url to the html file that is serving your app? I suspect you might need to setup your httpd so that it understands what is going on.