So I am having trouble loading my custom CreateBooking.html which only has this as a test
<div class="container">
<h2>AngularJS Test</h2></div>
My structure is like this
The main angular module
module Asda {
var app = angular.module("BookingApp", ["ngRoute"])
.config(function ($routeProvider: ng.route.IRouteProvider, $locationProvider: ng.ILocationProvider) {
$locationProvider.html5Mode(true);
});
}
The controller
module Asda {
export class CreateBookingController {
static $inject = ["$scope", "$http"];
bookingData: IBookingViewModel;
constructor($scope, $http) {
this.bookingData.Action = "Test";
}
static routing($routeProvider) {
$routeProvider.when("/createbooking",
{
controller: "CreateBookingController",
templateUrl: "/app/CreateBooking/CreateBooking.html",
controllerAs: "ctr"
});
}
}
angular.module("BookingApp")
.controller("CreateBookingController", CreateBookingController)
.config(["$routeProvider", CreateBookingController.routing]);
};
As I am using .net core MVC I am catching the request and loading a generic cshtml view which has this inside
<div ng-view>
So angular should be able to load its view... however the html in CreateBooking.html is not rendered..
I have added the files in this order in my head section
<script src="~/js/angular.min.js"></script>
<script src="~/js/angular-route.min.js"></script>
<!-- Main angular app module-->
<script src="~/App/BookingApp.js"></script>
<!-- Angular controllers-->
<script src="~/App/CreateBooking/CreateBookingController.js"></script>
angular and angular-route are both v1.7.9
I am at a loss.. :/
Dont forget to kickstart with ng-app!
Related
I'm new to angularjs and followed the tutorial here from w3schools to create my first simple Angularjs app and it worked fine. After going through the official angularjs tutorial I decided to modularize my app but now its not working. Currently I m getting the error
"The controller with the name 'redController' is not registered."
I want to display a message in component 'red' using its controller. I tried altering many parts of the code only to get new errors and it seems I have messed up modularizing :|
I'm using v1.6.9
Here is my directory structure
app/
scripts/
angular.min.js
angular-route.js
blue/
blue.template.html
red/
red.template.html
red.module.js
red.component.js
app.config.js
app.module.js
index.html
and source files :
app.config.js
angular
.module("myApp", [ 'red','ngRoute' ])
.config(function($routeProvider) {
$routeProvider
.when("/red", {
templateUrl : "red/red.template.html",
controller: "redController"
})
.when("/blue", {
templateUrl : "blue/blue.template.html"
});
});
app.module.js
angular.module('myApp', [
'red',
'ngRoute'
]);
index.html
<!DOCTYPE html>
<html>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="red/red.module.js"></script>
<script src="red/red.component.js"></script>
<body ng-app="myApp">
Red
Blue
<div ng-view></div>
<p>Click on the links to navigate "</p>
</body>
</html>
red.template.html
<h1>red</h1>
<p>{{msg}}</p>hell
red.module.js
angular.module('red', [ 'ngRoute' ]);
red.component.js
angular.module('red').component('red',{
templateUrl: 'red/red.template.html',
controller: function redController() {
this.msg = "this is red";
console.log("Hi");
}
});
You are delcaring the module again and again in each .js files, declare only in one .js file and use it in rest of the fields.
change your red.module.js as,
angular.module('red', []);
your app.config.js should be as,
angular
.module("myApp")
.config(function($routeProvider) {
$routeProvider
.when("/red", {
templateUrl : "red/red.template.html",
controller: "redController"
})
.when("/blue", {
templateUrl : "blue/blue.template.html"
});
});
and change the order as follows,
<script src="red/red.module.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="red/red.component.js"></script>
Change red.component.js as follows
angular.module('red')
.component('red',{
templateUrl:
'red/red.template.html',
})
.controller("redController",function($scope)
{
$scope.msg ="This is red";
});
First of all, as #Sajeetharan you're defining the myApp module twice. Inside your app.config.js and also in app.module.js. If you use angular.module with 2 parameters angular.module('app', []) you're setting the module, if you use angular.module('app') it'll work as a getter. So, in your app.config.js you should use the getter to configure your app.
Once you did that, you can configure your route to something like this:
angular.module('myApp').config(function($routeProvider){
$routeProvider.when('/red', { template: '<red></red>'});
})
I would use this approach since you defined the component in another module.
If you still want to use the approach you've implemented to set both the templateUrl and controller in the $routeProvider, you'll have to change your red component declaration to something like this:
angular.module('red')
.component('red', { templateUrl: 'red/red.template.html'})
.controller('redController', function(){
this.msg = 'This is red.';
});
I'vent tested this second approach as for me the first makes more sense.
I am unable to get ui.router to load a component on index.html, through a localhost or otherwise:
index.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//unpkg.com/angular-ui-router#0.3.1/release/angular-ui-router.js"></script> <!-- used to route views -->
<script src="js/components.js"></script>
<body ng-app="myApp">
<div> <!-- main content -->
<ui-view></ui-view> <!-- this directs ui-router to put the home view here-->
</div>
components.js
var app = angular.module('myApp', ['ui.router']); //makes a call to the Angular API to create our app, configured with the ui.router plug-in
//configure our view router
app.config(function($stateProvider) {
//create our different views as objects
var mainState ={
name: 'main', //name of the object
url: '', //url to point to, or that causes this view to be triggered
component: 'home', //component that works with the data, loads the template
resolve: { //data to bind to our component
data: function(Resource) {
console.log(Resource.test()) //returns "Hello World"
return Resource.test()
}
}
}
//call the states
$stateProvider.state(mainState);
})
app.service('Resource', function ($http) {
var service = {
test: function() {
return "Hello world"
}
}
return service;
})
app.component('home', {
bindings: { data: '<'}, //make the data we loaded into the view from the factory available to this component
template: "<p>{{data}}</p>", //this is the html that we will plug our data into
controller: function () {
console.log(this) //does not call
}
})
"Hello world" loads, as does data when I make $http gets through the service. But it does not get passed to the component. Any thoughts?
component attribute is available from ui-router#1.0.0(see here and in CHANGELOG.MD - it was added in 1.0.0-aplpha) so it's not available 0.3.1.
Here is working jsFiddle (with 1.0.3-beta)
By default the data will be applicable on view with $ctrl controller alias
template: "<p>{{$ctrl.data}}</p>",
Demo Plunkr
I am learning Angularjs and having problem with routing. I write up a very simple slim demo example which uses out of the box MVC5. The home page display fine but when I click on the About link it doesn't show the About page and AboutController break point is not hit. And got the following error in Console
Error: [$compile:tpload] Failed to load template: templates/indexView.html (HTTP status: 404 Not Found).
If I swap the two route, then my About page is displayed but got the error when clicking Home link so I am sure the html can be loaded. What do I need to do in order to get the routing to work?
Below is the index.cshtml
#{
ViewBag.Title = "Home Page";
ViewBag.InitModule = "homeIndex";
}
#section Scripts {
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/js/home-index.js"></script>
}
<div data-ng-view=""></div>
Below is the About.cshtml
#{
ViewBag.Title = "About Page";
ViewBag.InitModule = "homeIndex";
}
#section Scripts {
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/js/home-index.js"></script>
}
<div data-ng-view=""></div>
below is the home-index.js
// home-index.js
var module = angular.module("homeIndex", ["ngRoute"]);
var angularFormsApp = angular.module('homeIndex', ["ngRoute"]);
angularFormsApp.config(["$routeProvider",
function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "templates/indexView.html",
controller: "HomeController"
})
.when("/About", {
templateUrl: "templates/aboutView.html",
controller: "AboutController"
});
}]);
angularFormsApp.controller("HomeController",
["$scope",
function ($scope) {
var x = 1;
}]);
angularFormsApp.controller("AboutController",
["$scope",
function ($scope) {
var x = 1;
}]);
The var x=1 has no meaning just for me to set a break point.
Below is indexView.html
<h3>Arrived at Index Page</h3>
aboutView.html
<h3>About Page</h3>
I also have the below in the _Layout.cshtml html tag to hook in angular
data-ng-app="#ViewBag.InitModule"
The problem seems to be that MVC is handling the routing that you expect to be handled by Angular.
Have a look at this question for some more information about having Both AngularJS and MVC in the same project:
Should I be using both AngularJS and ASP.NET MVC?
Here is a nice guide to getting started using the two together, it specifically touches on the routing as well:
Getting started with AngularJS and ASP.NET MVC
I hope that helps, please let us know if you need more information, or if something is not clear.
I am trying to set up a project using gulp and browser sync with angularjs. I cannot get browser sync to work correctly when I use the ng-view tag in my index.html file. This is the error I get in my browser console when I run browser sync:
Uncaught TypeError: Cannot read property 'data1457531805746' of null
coming from browser-sync-client.2.11.1.js:204 It works as expected, page loads fine, when ng-view/ngRoute is not used.
These are my files:
./gulpfile.js
// Spin up a server
gulp.task('browserSync', function() {
browserSync.use(spa({
selector: "[ng-app]" //Only needed for angular apps
}));
browserSync.init({
port: 8080,
server: {
baseDir: path.src
}
})
});
// Watch for changes in files
gulp.task('watch', ['browserSync'], function() {
// Watch .js files -- removed for brevity
});
// Default Task
gulp.task('default', ['watch']);
./app/controllers/controllers.js
'use strict';
/* Controllers */
var dc4SearchControllers = angular.module('dc4SearchControllers', []);
dc4SearchControllers.controller('CompanySearchCtrl', ['$scope', '$http',
function($scope, $http){
$scope.test = 'Hello, world!';
}]);
./app/index.html
<html ng-app="dc4SearchApp">
<head>
<link href="/bower_components/webui-core/dist/webui-core.min.css" rel="stylesheet">
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"> </script>
<script src="/bower_components/lodash/lodash.min.js"></script>
<script src="/bower_components/webui-core/dist/webui-core.min.js"></script>
<script src="app.js"></script>
<script src="controllers/controllers.js"></script>
</head>
<body ng-view>
</body>
</html>
./app/app.js
'use strict';
/* App Module */
var dc4SearchApp = angular.module('dc4SearchApp', [
'ngRoute',
'dc4SearchControllers'
]);
dc4SearchApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/company-search', {
templateUrl: 'views/company-search.html',
controller: 'CompanySearchCtrl'
}).
otherwise({
redirectTo: '/company-search'
});
}]);
./app/views/company-search.html
<div ng-controller="CompanySearchCtrl">
{{test}}
<div class="spinner spin"> </div>
</div>
I am hoping this is just something silly and easy that I am over looking and haven't tried yet! Thanks in advance.
"Browsersync works by injecting an asynchronous script tag right after the body tag during initial request. In order for this to work properly the body tag must be present. Alternatively you can provide a custom rule for the snippet using snippetOptions"
https://www.npmjs.com/package/browser-sync
It seems Browsersync is reloading the body tag. Have you tried moving the ng-view to another child div ?
I am trying to create a simple Angular app and I have recently added a router in route.js. For some reason the association isn't being made between mainCtrl and someview.html The reason I know this is because the view isn't being injected in <div ng-view></div> Anyone have any idea why?
My folder structure is the following
root
------/app
----------routes.js
----------/views
-----------------someview.html
------/public
---------mainCtrl.js
---------index.html
server.js
mainCtrl.js
angular.module('LiveAPP',[])
.controller('MainCtrl', function($scope) {
$scope.Artists = [
{name:"Blink 182",age:14},
{name:"Led Zeppelin",age:12},
{name:"Lil Wayne",age:11}
];
$scope.number = 100;
});
someview.html
<div>{{number}}</div>
route.js
angular.module('LiveAPP', ['ngRoute'])
.config(function($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl : '/views/someview.html',
controller : 'MainCtrl'
})
});
index.html
<!doctype html>
<html ng-app='LiveAPP'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
<script src="mainCtrl.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
server.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000);
console.log("Listening at 3000")
angular.module('LiveAPP',[])
.controller('MainCtrl', function($scope) {
Here, you define a module LiveAPP, that doesn't depend on any other module, and add a controller to this module.
angular.module('LiveAPP', ['ngRoute'])
.config(function($routeProvider, $httpProvider) {
And here, you redefine, once again, a module with the same name, depending on ngRoute. But since you're redefining it, you effectively overwrite the previously defined module and all its components.
A module must be defined once, and only once.
I don't know much about express, but I also don't understand why all your files are not under public, since that is apparently the directory that the web server serves.