AngularJS - টেমপ্লেটটি তৈরির ক্ষেত্রে কীভাবে $ রুটপ্যারাম ব্যবহার করবেন?

Question 1

আমাদের অ্যাপ্লিকেশনটিতে 2-স্তরের নেভিগেট রয়েছে। আমরা কোনটিতে $routeProviderটেমপ্লেটগুলি গতিশীলভাবে সরবরাহ করতে AngularJS ব্যবহার করতে চাই <ng-view />। আমি এর লাইনে কিছু করার কথা ভাবছিলাম:

angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/:primaryNav/:secondaryNav', {
        templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html'
    });
}]);

আমি ঠিক জানি না কীভাবে অংশগুলির মধ্যে অংশগুলি স্থাপন করা যায় <<>>। আমি জানি প্রাথমিক ন্যাভ এবং সেকেন্ডারি নাভ $ রুটপ্যারামের সাথে আবদ্ধ, তবে কীভাবে আমি টেমপ্লেটটিকে গতিশীলভাবে পরিবেশন করতে এখানে $ রুটপ্যারামগুলিতে অ্যাক্সেস করব?

Question 2

আমি ইনজেকশন এবং $routeParamsপরিষেবাটি ব্যবহার করার কোনও উপায় খুঁজে পাইনি (যা আমি মনে করি এটি আরও ভাল সমাধান হবে) আমি এই চিন্তাভাবনাটি চেষ্টা করেছিলাম এটি কার্যকর হতে পারে:

angular.module('myApp', []).
    config(function ($routeProvider, $routeParams) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'
        });
    });

যা এই ত্রুটিটি পেয়েছিল:

অজানা প্রদানকারী: my রুটপ্যারামগুলি মাই অ্যাপ থেকে

যদি এর মতো কিছু সম্ভব না হয় আপনি templateUrlস্রেফ রয়েছে এমন একটি আংশিক এইচটিএমএল ফাইলের দিকে নির্দেশ করতে ng-includeএবং তারপরে $routeParamএই জাতীয় ব্যবহার করে আপনার নিয়ামকের URL টি সেট করতে পারেন:

angular.module('myApp', []).
    config(function ($routeProvider) {
        $routeProvider.when('/:primaryNav/:secondaryNav', {
            templateUrl: 'resources/angular/templates/nav/urlRouter.html',
            controller: 'RouteController'
        });
    });

function RouteController($scope, $routeParams) {
        $scope.templateUrl = 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html';
    }

এই হিসাবে আপনার হিসাবে urlRouter.html

<div ng-include src="templateUrl"></div>

Question 3

এই অত্যন্ত সহায়ক বৈশিষ্ট্যটি এখন AngularJS এর ১.১.২ সংস্করণে পাওয়া যায়। এটি অস্থির হিসাবে বিবেচিত হয়েছে তবে আমি এটি ব্যবহার করেছি (1.1.3) এবং এটি দুর্দান্ত কাজ করে।

মূলত আপনি একটি টেম্পলেট ইউআরএল স্ট্রিং তৈরি করতে একটি ফাংশন ব্যবহার করতে পারেন। ফাংশনটি রুট পরামিতিগুলি পেরিয়ে গেছে যা আপনি টেম্পলেট ইউআরএল স্ট্রিংটি তৈরি এবং ফিরে পেতে ব্যবহার করতে পারেন।

var app = angular.module('app',[]);

app.config(
    function($routeProvider) {
        $routeProvider.
            when('/', {templateUrl:'/home'}).
            when('/users/:user_id', 
                {   
                    controller:UserView, 
                    templateUrl: function(params){ return '/users/view/' + params.user_id; }
                }
            ).
            otherwise({redirectTo:'/'});
    }
);

টান অনুরোধের জন্য https://github.com/lrlopez কে অনেক ধন্যবাদ ।

https://github.com/angular/angular.js/pull/1524

Question 4

টেম্পলেট ইউআরএল উত্পন্ন URL টি দিয়ে ফাংশন হিসাবে ব্যবহার করা যেতে পারে। আমরা ইউআরএলকে পাসিং আর্গুমেন্টের সাথে ম্যানিপুলেট করতে পারি যা রুটপ্যারামগুলি লাগে।

উদাহরণ দেখুন।

.when('/:screenName/list',{
    templateUrl: function(params){
         return params.screenName +'/listUI'
    }
})

এই সাহায্য আশা করি।

Question 5

ঠিক আছে, মনে হয় আমি পেয়েছি ...

ছোট্ট ব্যাকগ্রাউন্ডটি প্রথমে: যে কারণে আমার এটি প্রয়োজন তা হ'ল নোড এক্সপ্রেসের শীর্ষে কৌণিকটিকে আটকে রাখা এবং জেড আমার পার্টিশনগুলি প্রসেস করা উচিত।

সুতরাং এখানে যা করতে হবে ... (বিয়ার পান করুন এবং এর উপর 20+ ঘন্টা ব্যয় করুন !!!) ...

আপনি যখন নিজের মডিউল সেট আপ করবেন, $routeProviderবিশ্বব্যাপী সংরক্ষণ করুন :

// app.js:
var routeProvider
    , app = angular.module('Isomorph', ['ngResource']).config(function($routeProvider){

        routeProvider = $routeProvider;
        $routeProvider
            .when('/', {templateUrl: '/login', controller: 'AppCtrl'})
            .when('/home', {templateUrl: '/', controller: 'AppCtrl'})
            .when('/login', {templateUrl: '/login', controller: 'AppCtrl'})
            .when('/SAMPLE', {templateUrl: '/SAMPLE', controller: 'SAMPLECtrl'})
            .when('/map', {templateUrl: '/map', controller: 'MapCtrl'})
            .when('/chat', {templateUrl: '/chat', controller: 'ChatCtrl'})
            .when('/blog', {templateUrl: '/blog', controller: 'BlogCtrl'})
            .when('/files', {templateUrl: '/files', controller: 'FilesCtrl'})
            .when('/tasks', {templateUrl: '/tasks', controller: 'TasksCtrl'})
            .when('/tasks/new', {templateUrl: '/tasks/new', controller: 'NewTaskCtrl'})
            .when('/tasks/:id', {templateUrl: '/tasks', controller: 'ViewTaskCtrl'})
            .when('/tasks/:id/edit', {templateUrl: '/tasks', controller: 'EditTaskCtrl'})
            .when('/tasks/:id/delete', {templateUrl: '/tasks', controller: 'DeleteTaskCtrl'})
        .otherwise({redirectTo: '/login'});

});

// ctrls.js
...
app.controller('EditTaskCtrl', function($scope, $routeParams, $location, $http){

    var idParam = $routeParams.id;
    routeProvider.when('/tasks/:id/edit/', {templateUrl: '/tasks/' + idParam + '/edit'});
    $location.path('/tasks/' + idParam + '/edit/');

});
...

যা প্রয়োজন ছিল তার চেয়ে বেশি তথ্য হতে পারে ...

মূলত, আপনি $routeProviderবিশ্বব্যাপী আপনার মডিউলটির ভার সঞ্চয় করতে চান , যেমন routeProviderআপনার নিয়ন্ত্রণকারীদের দ্বারা এটি অ্যাক্সেস করা যায়।
তারপরে আপনি কেবল routeProviderএকটি নতুন রুটটি ব্যবহার এবং তৈরি করতে পারেন (আপনি 'একটি রুট পুনরায় সেট করতে পারবেন না' / 'পুনঃপ্রকাশ' করতে পারেন; আপনাকে অবশ্যই একটি নতুন তৈরি করতে হবে), আমি শেষে একটি স্ল্যাশ (/) যুক্ত করেছি যাতে এটি শব্দার্থক প্রথম হিসাবে
তারপরে (আপনার কন্ট্রোলারের অভ্যন্তরে), templateUrlআপনি যে ভিউটি চাপতে চান তাতে সেট করুন ।
অবজেক্টটির controllerসম্পত্তি বের করুন .when(), পাছে আপনি অসীম অনুরোধ লুপটি পাবেন না।
এবং অবশেষে (এখনও কন্ট্রোলারের ভিতরে), $location.path()সবে তৈরি হওয়া রুটে পুনঃনির্দেশ করতে ব্যবহার করুন ।

: আপনি কিভাবে একটি এক্সপ্রেস অ্যাপ্লিকেশন সম্মুখের একটি কৌণিক অ্যাপ্লিকেশন চড় আগ্রহী হন, তাহলে, আপনি আমার রেপো এখানে মাল করতে https://github.com/cScarlson/isomorph ।

এবং এই পদ্ধতিটি আপনাকে ওয়েবসকেটগুলি ব্যবহার করে আপনার ডাটাবেসে আপনার এইচটিএমএলকে আবদ্ধ করতে চান এমন ক্ষেত্রে অ্যাঙ্গুলার জেএস বাইরেশনাল ডেটা-বাইন্ডিংগুলি রাখার অনুমতি দেয়: অন্যথায় এই পদ্ধতিটি না থাকলে আপনার কৌণিক ডেটা-বাইন্ডিংগুলি কেবল আউটপুট হবে {{model.param}}।

আপনি যদি এই মুহুর্তে এটি ক্লোন করেন তবে এটি চালানোর জন্য আপনার মেশিনে মঙ্গোডিবি লাগবে।

আশা করি এটি এই সমস্যার সমাধান করে!

কোডি

আপনার স্নানের জল পান করবেন না।

Question 6

রাউটার: -

...
.when('/enquiry/:page', {
    template: '<div ng-include src="templateUrl" onload="onLoad()"></div>',
    controller: 'enquiryCtrl'
})
...

নিয়ামক: -

...
// template onload event
$scope.onLoad = function() {
    console.log('onLoad()');
    f_tcalInit();  // or other onload stuff
}

// initialize
$scope.templateUrl = 'ci_index.php/adminctrl/enquiry/'+$routeParams.page;
...

আমি বিশ্বাস করি যে এটি কৌণিকর ক্ষেত্রে একটি দুর্বলতা যে $ রুটপ্যারামগুলি রাউটারের ভিতরে দৃশ্যমান নয়। একটি ক্ষুদ্রতর বর্ধন বাস্তবায়নের সময় একটি পার্থক্য তৈরি করে।

Question 7

আমি আমার কৌণিক কাঁটাচামচ এ জন্য সমর্থন যোগ করেছি। এটি আপনাকে নির্দিষ্ট করার অনুমতি দেয়

$routeProvider
    .when('/:some/:param/:filled/:url', {
          templateUrl:'/:some/:param/:filled/template.ng.html'
     });

https://github.com/jamie-pate/angular.js/commit/dc9be174af2f6e8d55b798209dfb9235f390b934

এটি কৌণিকর জন্য দানার বিরুদ্ধে এক ধরণের হিসাবে এটি গ্রহণ করা হবে তা নিশ্চিত নয়, তবে এটি আমার পক্ষে দরকারী

Question 8

//module dependent on ngRoute  
 var app=angular.module("myApp",['ngRoute']);
    //spa-Route Config file
    app.config(function($routeProvider,$locationProvider){
          $locationProvider.hashPrefix('');
          $routeProvider
            .when('/',{template:'HOME'})
            .when('/about/:paramOne/:paramTwo',{template:'ABOUT',controller:'aboutCtrl'})
            .otherwise({template:'Not Found'});
    }
   //aboutUs controller 
    app.controller('aboutCtrl',function($routeParams){
          $scope.paramOnePrint=$routeParams.paramOne;
          $scope.paramTwoPrint=$routeParams.paramTwo;
    });

ইনডেক্স। html এ

<a ng-href="#/about/firstParam/secondParam">About</a>

ফার্স্টপরাম এবং সেকেন্ডপ্রাম আপনার প্রয়োজন অনুসারে যে কোনও কিছু হতে পারে।

Question 9

আমার অনুরূপ সমস্যা ছিল এবং এর $stateParamsপরিবর্তে আমি ব্যবহার করেছিrouteParam