How to inherit from base controller using "controller as" syntax? - javascript

Here is a snippet demonstrating how to inherit from a base controller using $controller and $scope:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
$controller('BaseCtrl', {
$scope: $scope
})
});
app.controller('BaseCtrl', function($scope) {
$scope.name = 'World';
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
How can I do the same using "controller as" syntax? This snippet demonstrates what I am after, but it doesn't work:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
$controller('BaseCtrl', {
$scope: $scope
})
});
app.controller('BaseCtrl', function() {
this.name = 'World';
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
<p>Hello {{main.name}}!</p>
</body>
</html>

You could use controller as syntax (or just use the ctrl instance returned by $controller provider) and use angular.extend. But i don't think there is another way implicitly angular would do this, since "controller as" syntax ultimately places the controller instance on the respective scope as a property name specified as alias. But this really isn't inheritance, but utilizing object extension.
var ctrl = $controller('BaseCtrl as base', { //You don't really need to use as syntax here though
$scope: $scope
});
angular.extend(this, ctrl);
//or
$controller('BaseCtrl as base', { //You don't really need to use as syntax here though
$scope: $scope
});
angular.extend(this, $scope.base); //With as syntax
Or you could use prototypical inheritance at the implementation level of the controller constructors itself. There are lots of syntactic sugars available, typescript's extends there is another nice and simple example here as well.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $controller) {
var ctrl = $controller('BaseCtrl as base', {
$scope: $scope
});
angular.extend(this, ctrl);
});
app.controller('BaseCtrl', function() {
this.name = 'World';
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as main">
<p>Hello {{main.name}}!</p>
</body>
</html>

Related

using jQuery function in AngularJS

codepen this is the working code
I have a working code for changing the status of the network.
But I used jQuery to achieve it and now I am using angular app for the same thing.
Could you please help me.
Below is the Angular Code I have tried from already existing plunker:
Plunker
HTML:
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
Hello {{name}}! {{online}}
</body>
</html>
js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
app.run(function($window, $rootScope) {
$rootScope.online = navigator.onLine;
$window.addEventListener("offline", function () {
$rootScope.$apply(function() {
$rootScope.online = false;
});
}, false);
$window.addEventListener("online", function () {
$rootScope.$apply(function() {
$rootScope.online = true;
});
}, false);
});
Use ng-class like this:
<div id="connection" ng-class="{'connected': online == true}">Online<div></div></div>
Here is your corrected Plunker
Hope this is what you wanted.
http://plnkr.co/edit/C2oJAYtEbb2lMixY2rVa?p=preview
<div id="connection" ng-class="{'connected': online, 'disconnected': !online}">
<span ng-if="$root.online">Online<div></div></span>
<span ng-if="!$root.online">Offline<div></div></span>
</div>
Note that with this approach, the initial state of 'connecting...' is not handled.

Controller not working in angularjs

Below code is not giving output as expected i:e Hello,World
output: {{ greetings.text }}, world
Can anyone help me why its not displaying 'hello, world' instead where I am wrong
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular JS App 1</title>
<script type="text/javascript" src="angular-v1.4.js"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'> //controller
<p>{{ greetings.text }}, World</p>
</div>
</body>
</html>
script for controller
function HelloController($scope){
$scope.greetings = {text : 'hello'};
}
Global controller isn't allowed from 1.3.x
Try like this
var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
$scope.greetings = {
text: 'hellow world'
}
});
HTML
add module name
<html ng-app="app">
add module name in ng-app..
like
<div ng-app='app'>
</div>
like this
<script>
angular.module('app', [])
.controller('testCtrl', ['$scope', function($scope){
$scope.test ="hello world";
}])
</script>
plunker code here
You need to provide the value for ng-app directive.
Like
<html ng-app="myapp">
and you should have the angular module myapp defined in script.

AngularJS replace using regex on template

I have the following markup that shows a value from ng-model.
<a ng-click="downloadDocument()">{{document.content.replace(/\d+\_/,"")}}</a>
Before each document.content I add a number and an underscore, smth like "12122141_document.txt". I want to replace this part by using this regex /\d+_/
This throws an error on angularJS, although {{ document.replace(" ","") }} works.
Is the only way to solve this a directive or am I doing something wrong?
Plunker: http://embed.plnkr.co/sh54XZwSIlYnmvY0eTIt/preview
Cheers,
Alex
I modified your Plunker-Demo and it works pretty fine.
Hint: Don't use $scope namespaces like "document". Its reserved/used by the client.
var app = angular.module('plunker', []);
Controller
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.fileName = {
content : function(){
return '1233_test.txt'.replace(/\d+\_/,"");
}
}
$scope.mpla = function () {
console.log('clicked');
}
});
View
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<a ng-click="mpla()" ng-bind="fileName.content()"></a>
</body>
</html>

Error in Angular JS

I included angular js in my asp.net mvc project but when i call object in controller
the angular js expressions do not evaluate
here is the app.js code please suggest
var app = angular.module('app', []);
app.controller('createController', createController);
and here is the createController code
var createController = function ($scope) {
$scope.mydata = 'I work!';
}
here is what i include in html
<html ng-app="app">
<script src="~/Scripts/angular.min.js"></script>
<script src="~/appAjs/app.js"></script>
<script src="~/appAjs/controllers/createController.js"></script>
<div ng-controller="createController">
{{scope.mydata}}
{{6+9}}
from your code, I can only suspect two things
your javascript does not have the proper scope
do not use the word scope in your "scope" code
first part: javascript scope:
Always use an IIFE, in your case your code should look like:
(function(){
var app = angular.module('app', []);
var createController = function ($scope) {
$scope.mydata = 'I work!';
};
app.controller('createController', createController);
}());
second part: don't use the word scope
in your HTML, you should not use the word scope as it's already inherit in your controller as that's the model you are passing to the "view"
hence, your code should look like:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-controller="createController">
{{mydata}}
{{6+9}}
</div>
</body>
</html>
the result is:
I work! 15
live code in JSBIN so you can check it out.
your HTML page, all together should look like this:
if you have only one file
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>My AngularJs App</title>
</head>
<body>
<!-- HTML -->
<div ng-controller="createController">
{{mydata}}
{{6+9}}
</div>
<!-- AngularJS required -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- AngularJS code -->
<script>
(function(){
var app = angular.module('app', []);
var createController = function ($scope) {
$scope.mydata = 'I work!';
};
app.controller('createController', createController);
}());
</script>
</body>
</html>
if you're using 2 files
file index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>My AngularJs App</title>
</head>
<body>
<!-- HTML -->
<div ng-controller="createController">
{{mydata}}
{{6+9}}
</div>
<!-- AngularJS required -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- AngularJS extra files -->
<script src="createController.js"></script>
</body>
</html>
file createController.js (in the same folder as index.html)
(function(){
var app = angular.module('app', []);
var createController = function ($scope) {
$scope.mydata = 'I work!';
};
app.controller('createController', createController);
}());
I think the problem may well be the order in which you are including your scripts:
Try the following:
<script src="~/Scripts/angular.min.js"></script>
<script src="~/appAjs/controllers/createController.js"></script>
<script src="~/appAjs/app.js"></script>
Reasoning is that app.js tries to define a controller using a function that has not been defined when the function is run.
Points that {{scope.data}} should be {{data}} are correct, but do not explain {{6+9}} not working.
You need to create the controller in the context of the app module.
Your app.js should just have
angular.module('app', []);
and your createController code should look similar to this
angular.module('app')
.controller('createController', function ($scope) {
$scope.mydata = 'I work!';
});
You need to change the expression from
{{scope.mydata}}
to
{{mydata}}
Expression have access to scope and no keyword is required to access a scope object.

ng-controller and ui-view doesn't work on the same element

I am using AngularJS and ui-router. My code has ng-controller and ui-view on the same element and the controller doesn't get triggered
http://plnkr.co/edit/UphvqV01R7m0WwlY67YA?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js" data-require="angular.js#1.2.x"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ui-view="main" ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</div>
</body>
</html>
Javascript:
var app = angular.module('plunker', []);
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state("home", {
url: "^",
resolve: {
test: function() {
alert("Triggered resolve home");
return true;
}
}
})
}]);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
Can you help to fix it or explain why?
You need to have your main module ultimately dependent on 'ui.router' somehow. Right now you have it dependent on nothing ([]).
var app = angular.module('plunker', ['ui.router']);
Don't do this.
When you transition to a state, ui.router assigns a controller to each active uiView element, so any controller you had previously assigned would be replaced.
Just wrap the uiView in a parent element and apply the controller to that.
Also, as Words Like Jared has pointed out, you're not even importing the ui.router module, so you need to do that, too.

Categories