I am kind of new to angular JS and this might be the simple question but i am stuck on this.
What i am trying to do is, I have one page and on that page I want to add a template. My template is kind of dynamic and have it's own controller. My code is something like this..
-- Main Page HTML --
<html ng-app="myApp">
<body ng-controller="MyAppCtrl">
<my-component>
</my-component>
</body>
</html>
-- Main page JS --
var myAppModule = angular.module('myApp');
myAppModule.controller('MyAppCtrl', function ($scope) {
})
.directive('myComponent', function () {
return {
restrict: 'E',
templateUrl: 'myComponent.aspx'
};
});
-- Template(myComponent.aspx) --
<html>
<!-- include template script -->
<body ng-controller="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</body>
</html>
-- Template page JS --
var templareModule = angular.module('myApp', []);
templareModule.controller('ComponentCtrl', function ($scope, $http) {
$scope.showAlert = function () {
alert("clicked");
}
});
So for this I am unable to get alert on click.
Thanks in advance.
You really don't need to create a custom directive to be able to do what you describe in your question and since you're a beginner I would suggest you start simple and do without the directive. You will need to use the ng-view tag and routing. There are some other minor issues with your code, some of which were already pointed out by others in the comments. The following code worked for me.
index.html:
<html ng-app="myApp">
<body>
<h1>Test</h1>
<div ng-view></div>
<script> (Insert paths to required Angular scripts and your JS files)</script>
</body>
</html>
App JS file:
Note: You will need to download the ngRoute JavaScript file from Angular's website and include it in your project to get the routing to work correctly. (Go to Downloads on their website, pick your version of Angular, then download ngRoute)
angular.module('myApp', [ 'ngRoute' ])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'myComponent.aspx',
controller: 'ComponentCtrl'
})
}])
.controller('ComponentCtrl', function ($scope) {
$scope.showAlert = function () {
alert("clicked");
}
});
myComponent.aspx:
<div class="ComponentCtrl">
<div ng-click="showAlert()">
myBtn
</div>
</div>
Let me know if you have questions or are still unable to get it to work. I would also suggest you check out some tutorial videos on Egghead.io's website. It helped me figure out the basics of Angular.
Related
This is my very first AngularJs app and created it after going through many examples on the web but I am doing something wrong here. It is highly likely because files are stored in dedicated folders. The HomeView.html template gets loaded fine but the controller doesn't. I mean I cannot get greetingMessage printed in the template. All I see is {{ greetingMessage }} instead of "Welcome!". What am I missing?
Error
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.4/$controller/ctrlreg?p0=HomeController
App Structure
app
conponents
home
HomeView.html
HomeController.js
...
...
index.js
index.html
index.html
<body ng-app="myApp">
<h3>AngularJS</h3>
<hr />
<p>Home</p>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.min.js"></script>
<script src="index.js"></script>
</body>
index.js
var module = angular.module('myApp', ['ngRoute']);
module.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'components/home/HomeView.html',
controller: 'HomeController'
// I tried -> controller: 'components/home/HomeController'
})
.otherwise({
redirectTo: '/'
});
});
HomeView.html
<div ng-controller="HomeController">
<h4>Home</h4>
<p>{{ greetingMessage }}</p>
</div>
HomeController.js
var module = angular.module('myApp', []);
module.controller('HomeController', [
'$scope',
function(
$scope
) {
$scope.greetingMessage = 'Welcome!';
}]);
The main reason is you haven't referred homeController.js on index.html, it should place right after index.js. This will not solve your issue. The other thing I'd like to mention is, you shouldn't be creating myApp module again while registering your controller with your myApp module. By declaring new module will flush out former registered component. So just use module getter like angular.module('myApp') and append further components to it.
<script src="components/home/HomeController.js">
Code
angular.module('myApp')
.controller('HomeController', [ '$scope',
function($scope) {
$scope.greetingMessage = 'Welcome!';
}
]);
You must be attach app file and next attache your controller file in your hoem page or master page.
This example helped you
Angular js routing
I am developing a web application. In my application, I am using Angular JS. I am new to Angular JS. But now I am having a problem my declaring controller. Here is my code.
<html>
<head>
//files references
</head>
<script>
var app = angular.module('memeApp',['ngRoute','ui.bootstrap']);
</script>
<nav class="nav-bar">
Home
Account
</nav>
<div class="content" ng-app="memeApp" ng-controller="DefaultController">
//content
</div>
</div>
</body>
</html>
As you can see I did nothing yet. I declare a controller named DefaultController. So when I check log, it is giving me following error:
So my controller is totally not working. When I add js code for controller as well. If I removed controller directive, errors gone. Why is my controller not working?
You need to define a controller function 'DefaultController' before you use it in html div tag.
Add below code in your script tag.
app.controller('DefaultController', ['$scope', function($scope){
}]);
You need to define your controller somewhere and add it as a dependency to the app first.
Example:
angular.module('app.controllers', [])
.controller('DefaultController' function() {
//do stuff
};
and in your app definition:
var app = angular.module('memeApp',['ngRoute','ui.bootstrap', 'app.controllers']);
I am have trying to fix this but not able to find a solution since a long time. I an angular newbie and trying to make my website home an angular app. The angular app has a controller and 2-3 directives. In the head section of the page I have:
Home.cshtml:
<head>
//Some other stuff....
<script src="/Scripts/angular.min.js" type="text/javascript"></script>
<script src="/Scripts/myapp.js" type="text/javascript"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HomeController">
<page-tile-grid></page-tile-grid>
</div>
</body>
And myapp.js has
var myapp= angular.module('myapp', [])
.controller("HomeController", function($scope){......})
.directive('page-tile-grid', function () {....})
.directive('page-tiles', function () {....})
.directive('page-tile-info', function () {....})
I see no error on the console. But template in the directive does not load. And see this warning on the Batarang Angular console:
Module "myapp" was created but never loaded.
What if you try something like:
var app = angular.module('myapp', []);
app.controller('HomeCtrl', function($scope) {
$scope.title = "Homepage";
...
});
app.controller('AboutCtrl', function($scope) {
$scope.title = "About";
...
});
I am using angular-route.min.js and I have two designs for my navbar.
The First one is the landing page navbar that will appear first on my index.html.
The second navbar is when the user is routed to the /signin page.
I am unsure on how to go about this. I see a lot of different ways that this could be done, but none really that explain how I could change the entire header view when another route is chosen. They just show how to change the links that are contained inside of it. Like this Stack
how can I switch out the header when it is routed to the /signin page?
also, I am working with another person who is doing the backend with Django. That is why I changed the "{{ }}" to "[[ ]]".
var app = angular.module('app', ['ui.bootstrap', 'ngRoute']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl: 'pages/LandingPage.html',
})
.when('/signin', {
templateUrl: 'pages/SignIn.html'
})
.when('/contact', {
templateUrl: 'pages/contact.html'
});
});
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js">
</script>
</head>
<body>
<div ng-view></div>
</body>
</html>
I think ng-include directive could solve the situation you are facing.
In controller code.
.controller('HeaderCtrl', function($scope, $location) {
$scope.$on('$locationChangeSuccess', function(/* EDIT: remove params for jshint */) {
var path = $location.path();
//EDIT: cope with other path
$scope.templateUrl = (path==='/signin' || path==='/contact') ? 'template/header4signin.html' : 'template/header4normal.html' ;
});
})
In Html.
<body>
<div ng-controller="HeaderCtrl">
<div ng-include="templateUrl"></div>
</div>
<div ng-view></div>
</body>
I hope this could help you. :)
The difference of your two navbars are not significant. An alternative is just use ng-class and ng-show to give different styles.
For example, in the navbar.html:
<nav>
<span ng-show="isNormalPage">Inn</span>
<img ng-class="{align-center: isNormalPage}">Logo</img>
<span ng-show="isNormalPage">Sing in</span>
</nav>
In your JS file, add a flag to mark singin page:
.when('/signin', {
controller: [$scope, function ($scope) {
$scope.isNormalPage = false;
};
}]
})
I'm trying to get into angularJS by writing the most basic app. However I'm unable to get even this small amount of code working - the controller doesn't seem to be displaying any of the views. This is almost a direct copy from a popular angularjs video I saw online. I have a feeling its not something big, and my guess is that I possibly have something wrong with the ng-view.
Any insight on what I'm doing wrong would be helpful.
index.html
<!doctype html>
<html ng-app="fastsql">
<head>
</head>
<body>
<div class="well">
<div ng-view></div>
</div>
<script src="angular.min.js"></script>
<script src="fastsql.js"></script>
</body>
</html>
fastsql.js
// setup fastsql as angular app "module"
var fastsql = angular.module("fastsql", []);
// set routeProvider rules in .config()
fastsql.config(function($routeProvider) {
// set what views are displayed for each change in the URL.
$routeProvider
.when("/", { controller: 'loginCntl', templateURL: 'test.html' })
.otherwise({ redirectTo: '/' });
});
// controllers
fastsql.controller("loginCntl", function($scope) { $scope.message = "hey"; });
templateURL should have been templateUrl.
you need to pass an array into the config function, the name of the services to injected, and then the function in to which they are injected.
fastsql.config(["$routeProvider", function($routeProvider) {
// do your thing
}]);