I have following module which defines my angular app.
var ang = angular.module('mainapp', ['ngRoute']);
ang.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when("/home", {
templateUrl: "homepage.html",
controller: "homeController"
}).
when("/quiz", {
templateUrl: "quizpage.html",
controller: "quizController"
}).
when("/", {
templateUrl: "index.html",
controller: "indexController"
});
//otherwise({ redirectTo: '/' });
}]);
ang.controller('indexController', function ($scope) {
$scope.btn = "Welcome"
$scope.Login = function () {
alert("Thanks ");
$location.path("home");
};
});
ang.controller('homeController', function ($scope) {
// initialize if you can
window.history.go(-1);
$scope.salutations = [{ name: "Mr", id: 1 }, { name: "Mrs", id: 2 }, { name: "Ms", id: 3 }, { name: "Jr", id: 4 }, { name: "Mister", id: 5 }, { name: "Dr", id: 6 }];
$scope.profile = {
name: "",
email: "",
contact: "",
division: "",
feedback: "",
};
$scope.submitInfo = function (profile) {
alert("Thanks " + profile.name + ". Lets get to the Quiz now.");
$location.path("quiz");
};
});
ang.controller('quizController', function ($scope) {
//initialize if you can
window.history.go(-1);
$scope.questions = [
{
"questionText": "Why is the sky blue?", "answers": [
{ "answerText": "blah blah 1", "correct": true },
{ "answerText": "blah blah 2", "correct": false },
{ "answerText": "blah blah 3", "correct": false }
]
},
{
"questionText": "Why is the meaning of life?", "answers": [
{ "answerText": "blah blah 1", "correct": true },
{ "answerText": "blah blah 2", "correct": false },
{ "answerText": "blah blah 3", "correct": false }
]
},
{
"questionText": "How many pennies are in $10.00?", "answers": [
{ "answerText": "1,000.", "correct": true },
{ "answerText": "10,000.", "correct": false },
{ "answerText": "A lot", "correct": false }
]
},
{
"questionText": "What is the default program?", "answers": [
{ "answerText": "Hello World.", "correct": true },
{ "answerText": "Hello Sunshine.", "correct": false },
{ "answerText": "Hello my ragtime gal.", "correct": false }
]
}
];
$scope.answers = {};
$scope.correctCount = 0;
$scope.showResult = function () {
$scope.correctCount = 0;
var qLength = $scope.questions.length;
for (var i = 0; i < qLength; i++) {
var answers = $scope.questions[i].answers;
$scope.questions[i].userAnswerCorrect = false;
$scope.questions[i].userAnswer = $scope.answers[i];
for (var j = 0; j < answers.length; j++) {
answers[j].selected = "donno";
if ($scope.questions[i].userAnswer === answers[j].answerText && answers[j].correct === true) {
$scope.questions[i].userAnswerCorrect = true;
answers[j].selected = "true";
$scope.correctCount++;
} else if ($scope.questions[i].userAnswer === answers[j].answerText && answers[j].correct === false) {
answers[j].selected = "false";
}
}
}
//console.log($scope.answers);
};
$scope.submitQuiz = function (quiz) {
alert("Congrats.");
$location.path("index");
};
});
I want to land user on index page with welcome button and upon clicking i want to take user to the homepage and when user fills info on home page it should go to quiz page.
But the app doesn't bind the controller to index page at all.
<!DOCTYPE html>
<html data-ng-app="mainapp">
<head>
<title>WinPrizes</title>
</head>
<body >
<div data-ng-controller="indexController">
<button ng-click="Login()">{{btn}}</button>
</div>
<script src="Scripts/angular.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/main.js"></script>
</body>
</html>
When the index page is opened it shows button text as {{btn}}. These are not partial templates . I just want to switch to different html pages as part of the navigation user clicks on a button in each page.
You're using ngRoute but you've not added the plugin library in index.html after the angulat.min.js In version 1.2 later angular-route.js has to be added separately it doesn't come inside main library. e.g.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-route.js">
</script>
Also, you're using $location service in all the controllers, so you've to pass that in controller function as a dependency.
You need ng-view directive on index.html to make routing work. And be careful that your views are partial views (containing partial html code). Also why you added window.history.go(-1); on initialisation of controller? Because it'll always go back to previous page onload o controller. You should add such code only inside some function which you're going to call on specific action/event.
Here's working plunker for your version of code:
https://plnkr.co/edit/ADWf012Q7mTVBR3svPYb?p=preview
Related
I'm working on a quiz app that is based on a 'string' answered instead of the variable 'number'. I tried different syntax but it just displays a blank with no data/error displayed. As you can see my code below, I'll give you an example logic that I want.
if(answer.correct == "answerstring"){displayvariable == "STRINGTOBEDISPLAYED"};
Here is my 'question.json'
{
"questions": [
{
"flashCardFront": "<img src='assets/questionimg/12_plate1.gif' />",
"flashCardBack": "12",
"flashCardFlipped": false,
"questionText": "What number is this?",
"answers": [
{"answer": "12", "correct": true, "selected": false},
{"answer": "17", "correct": false, "selected": false},
{"answer": "NOTHING", "correct": false, "selected": false}
]
},
{
"flashCardFront": "<img src='assets/questionimg/8_plate2.gif' />",
"flashCardBack": "8",
"flashCardFlipped": false,
"questionText": "What is number is this?",
"answers": [
{"answer": "3", "correct": false, "selected": false},
{"answer": "8", "correct": true, "selected": false},
{"answer": "NOTHING", "correct": false, "selected": false}
]
},
{
"flashCardFront": "<img src='assets/questionimg/29_plate3.gif' />",
"flashCardBack": "29",
"flashCardFlipped": false,
"questionText": "What is this?",
"answers": [
{"answer": "70", "correct": false, "selected": false},
{"answer": "NOTHING", "correct": false, "selected": false},
{"answer": "29", "correct": true, "selected": false}
]
}
]
}
My data.ts where my dataprovider is located.
import { Injectable } from '#angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '#angular/common/http';
/*
Generated class for the DataProvider provider.
See https://angular.io/guide/dependency-injection for more info on providers
and Angular DI.
*/
#Injectable()
export class DataProvider {
data: any;
constructor(public http: HttpClient) {
}
load(){
if(this.data){
return Promise.resolve(this.data);
}
return new Promise(resolve => {
this.http.get('assets/data/questions.json').subscribe((data:any) => {
this.data = data.questions;
resolve(this.data);
});
});
}
}
My typescript where the quiz is being processed
import { Component, ViewChild} from '#angular/core';
import { NavController} from 'ionic-angular';
import { DataProvider } from '../../providers/data/data';
/**
* Generated class for the IshiharaQuestionsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#Component({
selector: 'page-ishihara-questions',
templateUrl: 'ishihara-questions.html',
})
export class IshiharaQuestionsPage {
#ViewChild('slides') slides: any;
hasAnswered: boolean = false;
score: number = 0;
cvd: string;
slideOptions: any;
questions: any;
constructor(public navCtrl: NavController, public dataService: DataProvider) {
}
ionViewDidLoad() {
this.slides.lockSwipes(true);
this.dataService.load().then((data) => {
data.map((question) => {
let originalOrder = question.answers;
question.answers = this.randomizeAnswers(originalOrder);
return question;
});
this.questions = data;
});
}
nextSlide(){
this.slides.lockSwipes(false);
this.slides.slideNext();
this.slides.lockSwipes(true);
}
selectAnswer(answer, question){
this.hasAnswered = true;
answer.selected = true;
question.flashCardFlipped = true;
if(answer.correct){
this.score++;
}
setTimeout(() => {
this.hasAnswered = false;
this.nextSlide();
answer.selected = false;
question.flashCardFlipped = false;
}, 3000);
}
randomizeAnswers(rawAnswers: any[]): any[] {
for (let i = rawAnswers.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let temp = rawAnswers[i];
rawAnswers[i] = rawAnswers[j];
rawAnswers[j] = temp;
}
return rawAnswers;
}
restartQuiz() {
this.score = 0;
this.slides.lockSwipes(false);
this.slides.slideTo(1, 1000);
this.slides.lockSwipes(true);
}
}
and this is where I want to display that string.
<ion-slide>
<ion-card>
<h2 text-justify padding>The 24 plate quiz suggests that you might currenly belong to this CVD type:</h2>
<br>
<br>
<br>
<h1 color="danger">{{cvd}}</h1> <<-----------------THIS LINE
<br>
<br>
<br>
<h2>Final Score: {{score}}/24</h2>
<button (click)="restartQuiz()" ion-button full color="primary">Start Again</button>
</ion-card>
</ion-slide>
Ionic syntax are basically uses TypeScript or more specifically similar to Angular (JS/2+) code, in Angular(JS/2+) for string comparison or to check equality we use '===' (triple equal to) rather '=='. Please replace '==' with '===', and it should be working OK.
I need to contruct a Json with 2 parts first of all I need to obtain a name of companies from an ApiRest it returns a Json with the name of the companies and a parameter that contains an address for each company that have de members of the company. The Json that I need to construct is something like this:`
[
{name: Company1,
members:
{ member1:
{
name: albert,
age: 16
},
member2:
{
name:joan,
age:18
}
}
},
{name: Company2,
members:
{ member1:
{
name: albert,
age: 16
},
member2:
{
name:joan,
age:18
}
}
}
]
The firts api rest is http://api1.getcompanyies and return :
[{
"_links": {
"url": {
"href": "http://api.company.members/1"
}
},
"name": "Company1",
},
{
"_links": {
"url": {
"href": "http://api.company.members/2"
}
},
"name": "Company2",
}, {
"_links": {
"url": {
"href": "http://api.company.members/3"
}
},
"name": "Company3"}
The second api Rest Response is:
{"employes": [
{
"name": "Mickael Ciani",
"age": "16"
},
{
"name": "Albert dd",
"age": "18"
}
]}
first I tried to do with nested $http but don't works:
$http(firstApi)
.then(function(res) {
$scope.ob = {};
angular.forEach(res.data.teams, function(value, key) {
var companyName = value.name;
$scope.ob[companyName] = {};
$scope.ob[companyName].memberUrl = alue._links.url.href;
$scope.teams2.push(value.name);
$http(paramsPlayers)
.then(function(res2) {
// construct the array
},
function() {}
);
});
return $scope;
},
function() {}
);
Then i tried to do without nested http but still don't work because the contruction of first object is incorrect , i think
$http(firstApi)
.then(function(res) {
$scope.ob = {};
angular.forEach(res.data.teams, function(value, key) {
var companyName = value.name;
$scope.ob[companyName] = {};
$scope.ob[companyName].memberUrl = alue._links.url.href;
$scope.teams2.push(value.name);
});
return $scope;
},
function() {}
);
$http(2apiparams)
.then(function(res2) {
//construct final json
},
function() {}
);
Thank You For all
You have to use $q.all for this scenario. I have written a angular service named CompanyService and a test implementation for the same. Hope this helps. You can use this service in your application. Take a look at promise chaining to get more idea on the implementation
var testData = {
companies: [{
"_links": {
"url": {
"href": "http://api.company.members/1"
}
},
"name": "Company1"
}, {
"_links": {
"url": {
"href": "http://api.company.members/2"
}
},
"name": "Company2"
}, {
"_links": {
"url": {
"href": "http://api.company.members/3"
}
},
"name": "Company3"
}],
memebers: {
"employes": [{
"name": "Mickael Ciani",
"age": "16"
},
{
"name": "Albert dd",
"age": "18"
}
]
}
};
angular.module('app', [])
.factory('CompanyService', function($http, $q) {
var COMPANY_API = 'your company api url';
var service = {};
service.getCompanies = function() {
//comment this for real implementation
return $q.when(testData.companies);
//uncomment this for real api
//return $http.get(COMPANY_API);
};
service.getMemebers = function(url) {
//comment this for real implementation
return $q.when(testData.memebers);
//uncomment this for real api
//return $http.get(url);
};
service.getAll = function() {
return service.getCompanies()
.then(function(companies) {
var promises = companies.map(function(company) {
return service.getMemebers(company._links.url.href);
});
return $q.all(promises)
.then(function(members) {
return companies.map(function(c, i) {
return {
name: c.name,
members: members[i].employes
};
});
});
});
};
return service;
})
.controller('SampleCtrl', function($scope, CompanyService) {
$scope.companies = [];
CompanyService.getAll()
.then(function(companies) {
$scope.companies = companies;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="SampleCtrl">
<pre>{{ companies | json }}</pre>
</div>
I am new to AngularJS and am currently working on an input field, which can accept multiple tags at a time along with the auto-complete feature, which display the available tags as dropdown options. For this I am using the ngTagsInput directive I found on the web(http://mbenford.github.io/ngTagsInput/), which gives me a custom HTML element <tags-input>. This works beautifully:
index.html:
<script>
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ text: 'Tag1' },
{ text: 'Tag2' },
{ text: 'Tag3' }
];
$scope.loadTags = function(query) {
return $http.get('tags.json');
};
});
</script>
<div ng-app="plunker" ng-controller="MainCtrl">
<tags-input ng-model="tags" add-on-paste="true" display-property="text" placeholder="Add a Tag" add-from-autocomplete-only="true">
<auto-complete max-results-to-show="4" min-length="2" source="loadTags($query)"></auto-complete>
</tags-input>
</div>
tags.json:
[
{ "text": "Tag1" },
{ "text": "Tag2" },
{ "text": "Tag3" },
{ "text": "Tag4" },
{ "text": "Tag5" },
{ "text": "Tag6" },
{ "text": "Tag7" },
{ "text": "Tag8" },
{ "text": "Tag9" },
{ "text": "Tag10" }
]
However I wanted to use the standard HTML <input> element instead of the custom <tags-input> element which comes along with the directive, so with a lot of help and using <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> I was able to do it here:
Here is the new index.html:
<script>
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ "id":1, "tagname": 'Tag1' },
{ "id":2, "tagname": 'Tag2' },
{ "id":3, "tagname": 'Tag3' },
{ "id":4, "tagname": 'Tag4' }
];
$scope.loadTags = function(query) {
return $http.get('tags.json');
};
});
app.directive('tagsInputAttr',
function($compile){
return {
restrict: 'A',
require: '?ngModel',
scope:{
ngModel: '='
},
link: function($scope, element, attrs, controller) {
var attrsText = '';
$.each($(element)[0].attributes, function(idx, attr) {
if (attr.nodeName === "tags-input-attr" || attr.nodeName === "ng-model")
return;
attrsText += " " + attr.nodeName + "='" + attr.nodeValue + "'";
});
var html ='<tags-input ng-model="ngModel" ' + attrsText + '></tags-input>';
e =$compile(html)($scope);
$(element).replaceWith(e);
}
};
}
);
</script>
<div ng-app="plunker" ng-controller="MainCtrl">
<input tags-input-attr ng-model="tags" add-on-paste="true" display-property="tagname" placeholder="Add tags here..." add-from-autocomplete-only="true">
<auto-complete max-results-to-show="3" min-length="2" source="loadTags($query)"></auto-complete>
</input>
</div>
And the new tags.json:
[
{ "id":1, "tagname": "Tag1" },
{ "id":2, "tagname": "Tag2" },
{ "id":3, "tagname": "Tag3" },
{ "id":4, "tagname": "Tag4" },
{ "id":5, "tagname": "Tag5" },
{ "id":6, "tagname": "Tag6" },
{ "id":7, "tagname": "Tag7" },
{ "id":8, "tagname": "Tag8" },
{ "id":9, "tagname": "Tag9" },
{ "id":10, "tagname": "Tag10" }
]
As you can notice,the new directive tagsInputAttr, which wraps the <tags-input> provides the same functionality and can be used inside <input> tag as an attribute along with the rest of attributes such as ng-model, display-property etc. So I don't have to use the <tags-input> element directly. The problem is that the <auto-complete> placed inside the <input> tag doesn't work.
For this I need to alter my directive, considering the following:
Note: I do not want to use jquery for this
My question is how do I wrap the <auto-complete> inside the same <input tags-input-attr> element:
Either as an attribute inside the same <input tags-input-attr> element
or as an attribute inside a standard HTML element like <div> or <span>, wrapped inside the same <input tags-input-attr> element.
If not the above two, then as last resort, as the <auto-complete> tag wrapped inside the same <input tags-input-attr> element
All help is appreciated.
Thanks in advance.
I made some changes on the previus directive and now it accepts all kind of transformation from attribute to element directive.
You still have the elem-as-attr attribute, but now you have to specify the value of it, that it will be the element that will replace.
Example:
<div elem-as-attr="tags-input"></div>
Your application JavaScript:
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.allTags = [
{ "id":1, "tagname": "Tag1" },
{ "id":2, "tagname": "Tag2" },
{ "id":3, "tagname": "Tag3" },
{ "id":4, "tagname": "Tag4" },
{ "id":5, "tagname": "Tag5" },
{ "id":6, "tagname": "Tag6" },
{ "id":7, "tagname": "Tag7" },
{ "id":8, "tagname": "Tag8" },
{ "id":9, "tagname": "Tag9" },
{ "id":10, "tagname": "Tag10" }
];
$scope.myTags =[
$scope.allTags[2],
$scope.allTags[4],
$scope.allTags[8]
];
$scope.loadTags = function(query) {
return $scope.allTags;
};
});
The directive code:
app.directive('elemAsAttr', function($compile) {
return {
restrict: 'A',
require: '?ngModel',
replace: true,
scope: true,
compile: function(tElement, tAttrs) {
return function($scope) {
var attrs = tElement[0].attributes;
var attrsText = '';
for (var i=0; i < attrs.length; i++) {
var attr = attrs.item(i);
if (attr.nodeName === "elem-as-attr") {
continue;
}
attrsText += " " + attr.nodeName + "='" + attr.nodeValue + "'";
}
var hasModel = $(tElement)[0].hasAttribute("ng-model");
var innerHtml = $(tElement)[0].innerHTML;
var html = '<' + tAttrs.elemAsAttr + attrsText + '>' + innerHtml + '</' + tAttrs.elemAsAttr + '>';
var e = hasModel ? $compile(html)($scope) : html;
$(tElement).replaceWith(e);
};
}
}
});
HTML code:
Element way:
<tags-input ng-model="myTags" add-on-paste="true" display-property="tagname" placeholder="Add a Tag" add-from-autocomplete-only="true">
<auto-complete max-results-to-show="10" display-property="tagname" min-length="2" source="loadTags($query)"></auto-complete>
</tags-input>
Attribute way:
<div elem-as-attr="tags-input" ng-model="myTags" add-on-paste="true" display-property="tagname" placeholder="Add tags here..." add-from-autocomplete-only="true">
<div elem-as-attr="auto-complete" max-results-to-show="10" display-property="tagname" min-length="2" source="loadTags($query)"></div>
</div>
Plunker:
https://plnkr.co/edit/9TqsXy
Note that you cannot use the input element for the tagsInput
because the input element does not have the closing tag in HTML. So
you will not be able to put the auto-complete element inside it.
I have an AngularJS Factory (holds collection of Objects), and I am trying to find what item a user is requesting.
Factory
angular.module('app').factory('APIMethodService', [function() {
return {
apis: [
{
accounts: [
{
parameters : [
{
name : "Account",
version : "1.0"
}
],
uri: Head + "/v1/accounts/account_number",
methods : [
{
name: "Account Number",
desc: "Returns the account number."
}, {
name: "Account Money",
desc: "Returns the monetary amount within the account."
}
]
},
{
parameters : [
{
name : "Account",
version : "2.0"
}
],
uri: Head + "/v2/accounts/account_number",
methods: [
{
name: "Account Number",
desc: "Returns the account number."
}, {
name: "Account Money",
desc: "Returns the monetary amount within the account."
}, {
name: "Account Token",
desc: "Returns the account's token."
}
]
}
],
customers:[
{
parameters : [
{
name : "Customers",
version : "1.0"
}
],
uri: Head + "/v1/customers/customer_number",
methods : [
{
name: "Customer Name",
desc: "Returns the customer's name."
}, {
name: "Customer ID",
desc: "Returns the customer's ID."
}
]
},
{
parameters : [
{
name : "Customers",
version : "2.0"
}
],
uri : Head + "/v2/customers/customer_number",
methods: [
{
name: "Customer Name",
desc: "Returns the customer's name."
}, {
name: "Customer ID",
desc: "Returns the customer's ID."
}, {
name: "Customer Email",
desc: "Returns the customer's email."
}
]
}
]
}
]
};
}]);
Controller
angular.module('app').controller('apiTabController', ['$scope', '$route', '$location', 'APIMethodService', function($scope, $route, $location, APIMethodService) {
$scope.params = $route.current.params;
if ($scope.data == null && Object.keys($scope.params).length > 0) {
console.log("came from URL");
// Variables I get from URL
var name = $scope.params.name;
var version = $scope.params.version;
// My list of API's
$scope.currentAPI = APIMethodService.apis;
for (var i = 0, len = $scope.currentAPI.length; i < len; i++) {
// FIND THE API OBJECT I NEED
}
}
}]);
So I pull in name and version from the URL parameters (like apiTab?name=Customers&version=1.0), and then I am trying to get the right object from my Factory that matches the parameters.
So If I wanted Customers, version 1.0, that would be $scope.currentAPI[0].customers[0], and the URL that would have given me this would be apiTab?name=Customers&version=1.0
But I am unsure how to search and match up the right factory object..
You can write logic inside service to get proper object, or other possible solution could be to replace for loop in your controller with following one, it handles best case only:
var matchAPIObject = {}; // to capture right object
for(var i in currentAPI){
var targetAPI = currentAPI[i][name.toLowerCase()];
for(var j in targetAPI){
//console.log(targetAPI[j].parameters[0].name.toLowerCase());
if(targetAPI[j].parameters[0].name.toLowerCase() === name.toLowerCase()
&& targetAPI[j].parameters[0].version === version ){
matchAPIObject = targetAPI[j]; //found it now get me out
break;
}
}
}
Happy Helping!
I would like to update a specific field in slideout from database(websql), to show the current user and he can access to his profil.
The targert is : title: log1, for that I used save:function (), and I have one record in database.
I spent many days searching but until now no solution.
Someone can help please.
Index
//...
<script type="text/javascript">
$(function() {
slideOut.app.navigate();
});
slideOut.Home = function (params) {
return {};
};
</script>
</head>
<body>
<div data-options="dxView : { name: 'Home', title: 'Slide Out' } " >
<div data-options="dxContent : { targetPlaceholder: 'content' } " >
</div>
</div>
</body>
</html>
App.config:
window.slideOut = $.extend(true, window.slideOut, {
var log1;
save:function (){
var db = openDatabase("dossierpatient", "1.0", "BD patient", 32678);
db.transaction(function(transaction){
transaction.executeSql("SELECT * FROM patient;", [], function(transaction,result){
for (var i=0; i< result.rows.length; i++) {
log1 = result.rows.item(i).login;
console.log(log1 + "\n ");
}
});
});
return log1;
}
"config": {
"navigationType": "slideout",
"navigation": [
{
"title": log1,
"action": "#",
"icon": "todo"
},
{
"title": "Item 2",
"action": "#",
"icon": "tips"
},
{
"title": "Item 3",
"action": "#",
"icon": "card"
},
{
"title": "Item 4",
"action": "#",
"icon": "map"
}
]
}
});
app.js
window.slideOut = window.slideOut || {};
$(function() {
// Uncomment the line below to disable platform-specific look and feel and to use the Generic theme for all devices
// DevExpress.devices.current({ platform: "generic" });
slideOut.app = new DevExpress.framework.html.HtmlApplication({
namespace: slideOut,
commandMapping: slideOut.config.commandMapping,
navigationType: "slideout",
navigation: getNavigationItems()
});
slideOut.app.router.register(":view", { view: "Home"});
function getNavigationItems() {
return slideOut.config.navigation; // cherche le contenu du slideOut
}
});
Seems like you have a mistake in app.config.js. The declaration of var log1 should be above extending code. The $.extend should have parameters as valid js objects:
var log1;
$.extend(true, window.slideOut, {
save: ...,
...
}
Move over I wouldn't advice you to add such a code in app config file.
To customize the view title (or whatever you have in your view) use viewModel with observables. For example:
slideOut.Home = function (params) {
var title = ko.observable("title");
var viewModel = {
title: title,
viewShowing: function() {
// TODO: put code fetching title from db and set it on done to observable
title("value");
}
};
return viewModel;
};
The code above will set the title of the view.