I have the following code inside my app.js file where i setup my controller
angular.module('app', ['components'])
.controller('MyApp', function($scope) {
$scope.message = "Hello World!";
});
inside my index.html file
I have simple text shown from the $scope.message
<div ng-controller="MyApp">
{{message}}
</div>
now I create new folder basic at the root of my project and inside I have one basic.html and basic.js file
basic.html
<h1>hello from basic html</h1>
basic.js
angular.module('components', [])
.directive('basic', function () {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function ($scope, $element, $http) {
},
templateUrl: "./basic.html",
replace: true
};
})
I try to call this directive now as a component from index.html file but nothing appears on the view
<div ng-controller="MyApp">
{{message}}
<basic></basic>
</div>
My full index.html at the end looks like this
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="./basic/basic.js"></script>
<script src="components.js"></script>
<script src="app.js"></script>
<script src='lib/webviewer.min.js'></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div ng-controller="MyApp">
{{message}}
<basic></basic>
</div>
</body>
</html>
why it is not working ?
Related
-----index.html-------
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
route.js"></script>
<script src="main.js"></script>
<script src="aboutController.js"></script>
<div ng-app="myApp" ng-controller="aboutController">
<h1>About Page</h1>
<p>{{ message }}</p>
<button ng-click="go()">Submit</button>
<div ng-view></div>
</div>
</html>
----main.js--------
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/go", {
templateUrl : "sample.html"
});
});
----aboutController.js---------
var app = angular.module("myApp", []);
app.controller('aboutController', function($scope,$http,$location) {
$scope.name="";
$scope.message="Home Page";
$scope.go= function(){
$http.get('content.json').success(function(data) {
$scope.obj = data;
$location.path("/go");
});
}
});
------sample.html--------
<h1>Sample Page</h1>
I am trying to use angular routing in this test application. Can you tell what am I doing wrong here? When I click on the submit button, location in the address bar changes to "http://localhost:8080/index.html#/go" but I don't see the contents of "sample.html" in ng-view.
You are declaring your module for your app twice so it is overwriting the first configuration. Remove the second declaration: var app = angular.module("myApp", []);
Heres your code working (I've remove the GET request and substituted template url with template for demonstrative purposes):
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/go", {
template: "<h1>Sample Page</h1>"
});
});
app.controller('aboutController', function($scope, $http, $location) {
$scope.name = "";
$scope.message = "Home Page";
$scope.go = function() {
$location.path("/go");
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
route.js"></script>
<script src="main.js"></script>
<script src="aboutController.js"></script>
<div ng-app="myApp" ng-controller="aboutController">
<h1>About Page</h1>
<p>{{ message }}</p>
<button ng-click="go()">Submit</button>
<div ng-view></div>
</div>
</html>
I have a header which remains common for all the pages. So, I included it in my index page like this.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
header.html
<ul>
<li>{{vm.myName}}"></li>
</ul>
My app.js file looks like this.
( function () {
angular.module('myApp', [
'ngRoute',
'myApp.header',
'myApp.home',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/home'
});
}]);
})();
I'm not including home controller or view as they have less importance here now. What I'm trying to do is, to pass a value from headerController.js to it's view header.html
As you can see, there is only one variable in my header.html
On the other side, headerController.js communicates with a backend service and fetches this result. And, I'm sure data is being returned by the service, I can see it in console and it looks like this:
{"myName":"Amelia Earheart"}
and here is my headerController.js
(function() {
angular
.module('myApp.header', [])
.factory('myCommonService', function($http) {
var baseUrl = 'api/';
return {
getName:function() {
return $http.get(baseUrl + 'getName');
}
};
})
.controller('CommonController', function($scope, $routeParams, myCommonService) {
var vm = this;
myCommonService.getName().success(function(data) {
vm.myName = data.myName;
});
});
})();
Can anyone tell why I am not getting the value in html view?
You should link your view with your controller.
Actually, your CommonController is not referenced anywhere. Try adding a ng-controller attribute to the div.header :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="assets/lib/angular.js"></script>
<script src="assets/lib/angular-route.js"></script>
<script src="headerController.js"></script>
<script src="HomeController.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="header" ng-controller="CommonController" ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>
And also you need to bind the value to the $scope (which is your model) rather to this. Your controller should look like this :
.controller('CommonController', function($scope, $routeParams, myCommonService) {
myCommonService.getName().success(function(data) {
$scope.myName = data.myName;
});
});
If you want to use "vm" in your header's view, you can change the ng-controller to ng-controller="CommonController as vm". This should do the trick.
If you don't do this, you'll have to update your header.html to :
<ul>
<li>{{myName}}</li>
</ul>
I am new in angularjs and going through Egghead.io videos..but i could not link js page into html page.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular</title>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h4>{{ "data.message"}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and my main.js file is
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
You need to define your app as var VARIABLE_NAME=angular.module('APP_NAME') and your controller as VARIABLE_NAME.controller('CONTROLLER_NAME', FUNCTION_EXPRESSION)
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h4>{{data.message}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
Note: You should not have quotes("") in your expressions or else, it will be treated at string.
Move these links inside tag
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"> </script>
<script type="text/javascript" src="main.js"></script>
and you cannot use $scope with module and controller this must be
var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = {"message": panel};
});
and in html
<div ng-app="myApp">
to first div
and use
{{data.message}}
I am learning to create directives and made them available via dependency add, but somehow it is not working, let me know what I am doing wrong.
Plnkr - http://plnkr.co/edit/Mk4h7XvSN2YA26JZZ9Ua?p=preview
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script type="text/javascript" src="firstDirective.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body ng-controller="mainCtrl as vm">
<div class="container">
<simple-directive></simple-directive>
</div>
</body>
</html>
firstDirective.js
angular
.module('firstdirective')
.directive('simpleDirective', function(){
return {
scope: true, // inherit child scope from parent
restrict: 'E',
replace: true,
template: '<h2>My first directive from dependency</h2>'
};
});
script.js
var myApp = angular.module('myApp', ['firstdirective']);
myApp.controller('mainCtrl', function(){
var vm = this;
})
To create a new module you need to pass an array of dependencies as the second argument:
angular.module('firstdirective', [])
Otherwise you are trying to retrieve the module.
I have a very basic example that isn't working: I have two aspects, the index.html and the main.js. They are in the same folder:
<!DOCTYPE html>
<html>
<head>
<title> AngularJS Tutorials </title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="main.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope) {
$scope.data = {message: "Hello"};
}
my page shows this:
{{data.message}}
You need to add the controller to the angular module. you can use the controller function to add the js function for your controller.
var FirstCtrl = function FirstCtrl($scope) {
$scope.data = {message: "Hello2"};
};
angular.module("myApp",[]).controller("FirstCtrl",FirstCtrl);
If you already had the angular module defined somewhere else in the page, Use this version.
angular.module("myApp").controller("FirstCtrl",FirstCtrl);
Here is a working sample http://jsbin.com/tiroteharu/edit?html,js,console,output
<script src="~/Scripts/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', ['$scope', function ($scope) {
$scope.data = { message: "Hello" };
}]);
</script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
More help read: https://docs.angularjs.org/guide/controller